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?

Answer 1

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.