Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 477
rajeev Avatar asked Dec 26 '12 02:12

rajeev


People also ask

How to get multiple file upload value in jQuery?

$("input[name=file1]"). change(function() { $("input[name=file]"). val($("input[name=file1]"). val()); });

How to upload multiple files in jQuery?

Just add the multi class to your file input element. Use the maxlength property if you want to limit the number of files selected. Use the accept property if you only want files of a certain extension to be selected. Separate valid extensions with a "|", like this: "jpg|gif|png".

How do you assign the value of a input type file multiple?

Tip: For <input type="file"> : To select multiple files, hold down the CTRL or SHIFT key while selecting. Tip: For <input type="email"> : Separate each email with a comma, like: [email protected], [email protected], [email protected] in the email field.


1 Answers

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.

like image 167
Spectre87 Avatar answered Oct 04 '22 19:10

Spectre87