CODEWITHSUNDEEP
jqueryhtmlinput
Voriki
Voriki

Reputation: 1647

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

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?

Upvotes: 4

Views: 9737

Answers (3)

Blue Chrome
Blue Chrome

Reputation: 19

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

Upvotes: 1

Sandeep
Sandeep

Reputation: 819

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());

 });

Upvotes: 0

Philip
Philip

Reputation: 4592

try console into 

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

cache the values an loop through them

Upvotes: 2

Related Questions