How to get value of multiple-file input on change with jQuery?

Question

To get the value of <input type="file" name="upload"> with jQuery, you could use $('input').val().

However, using the same method to get the value of <input type="file" name="upload[]" multiple> (multiple-file input) only returns one file, not all of them.

Is there a different way to do this?

Did you find a solution for this? The answers are not helpful at all. — Alqin, Mar 18 '13 at 22:57
@Alqin Yep. Check out http://stackoverflow.com/questions/14035530/how-to-get-value-of-html-5-multiple-file-upload-variable-using-jquery — Voriki, Mar 18 '13 at 23:11
@dsdsdsdsd That is true. But that's the closest a solution came to the question — Voriki, Oct 08 '13 at 22:16

Philip · Answer 1 · 2012-01-11T03:32:43.803

2

try console into

document.forms[index].elements[index].files

cache the values an loop through them

edited Jan 11 '12 at 03:32

answered Jan 11 '12 at 03:26

Philip

4,592
2
20
28

score 1 · Answer 2 · answered Sep 20 '12 at 13:33

I used some code from another post...

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

..and added the ID of each specific file input field. The code below gets the path from the input, pulls only the filename from it and shows that value in a different field for two different file upload fields. If you had a ton of them, you could create a loop based on this code:

$('#File1').change(function(){ // when you leave the File1 form field
  var filename1 = $('input[type=file][id=File1]').val().split('\\').pop(); // get just the filename
  $('#DL_Filename1').val(filename1); // and place it in the DL_Filename1 box
}); // end change

$('#File2').change(function(){ // when you leave the File2 form field
  var filename2 = $('input[type=file][id=File2]').val().split('\\').pop(); // get just the filename
  $('#DL_Filename2').val(filename2); // and place it in the DL_Filename2 box
}); // end change

Maybe you could provide attribution for the "code from another post..." Thanks. — Kev, Sep 22 '12 at 22:46

score 0 · Answer 3 · answered Jan 11 '12 at 05:49

That's because, when you use$('input').val() it returns the value of only the first of those inputs. You need to loop over to get the values of all of them. See the below code:

 var $uploads = $('input');

 $uploads.each(function() {

     console.log($(this).val());

 });

How to get value of multiple-file input on change with jQuery?

3 Answers3