how to get value of html 5 multiple file upload variable using jquery?

rajeev picture rajeev · Dec 26, 2012 · Viewed 7.2k times · Source

even though i select multiple files using below html.

<input type="file" id="multiplefiles" name="uploadedfile[]" multiple>

I only get value of first file selected. i am using a simple:

var filelist = $("#multiplefiles").val() || [];
$.each(filelist, function(i, myfile) {
  console.log('found file '+i+' ='+myfile);
});

please advise how do i get list of all files...

for example selected string in the input field is: C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg, C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg, C:\Users\Public\Pictures\Sample Pictures\upload-2.txt

and from above logic i only get: following in log:

found file 0 =Hydrangeas.jpg

ty. Rajeev

Answer

Alex Schimp picture Alex Schimp · Dec 26, 2012

This should do the trick:

var filelist = document.getElementById("multiplefiles").files || [];
for (var i = 0; i < filelist.length; i++) {
    console.log('found file ' + i + ' = ' + filelist[i].name);
}

A working jsFiddle is here.