Get the file names from multiple file upload field

Question

I am trying to write an ajax uploader using Jquery. In the html I can write a multiple upload field like:

<input type='file' multiple='multiple' name='files[]'>

But, how can I get the values from this field? When I used:

   $('input[type='file']').val();

or

   $('input[type='file']').attr('value');

I only got the file name for the first file I selected to upload. Is there a way I can get an array containing all files?

James Allardice · Accepted Answer · 2011-10-07 07:05:05Z

9

The HTML5 Files API means that the input will have a files property. You can access it like so:

var fileList = document.getElementById("yourInput").files;

That returns a FileList, which I believe is an array-like object containing all files selected by the user, so you would be able to iterate over it as normal:

for(var i = 0; i < fileList.length; i++) {
    //Do something with individual files
}

But it won't work in browsers that don't support HTML5, and I don't think it was supported in IE until version 9. If those older browsers are important to you, your best bet is probably to use a Flash or Java based uploader.

answered Oct 7, 2011 at 7:05

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get the file names from multiple file upload field

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related