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

Question

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

Alexander Schimpf · Accepted Answer · 2012-12-26 03:21:06Z

10

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.

answered Dec 26, 2012 at 3:21

Alexander Schimpf

2,3921 gold badge24 silver badges39 bronze badges

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

1 Comment

Rajeev Over a year ago

thank you very much. I also wanted to know about file sizes and by your help - now i know i can use the .size option to get file size. thz again!!!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related