CODEWITHSUNDEEP
javascriptjquery
Devendra Vaghela
Devendra Vaghela

Reputation: 43

How to get all files name and size using jquery from <input type=file multiple>

How to get all files name and size using jquery from

My HTML

<input type="file" id="images" multiple="multiple">
<input type="submit" id="send">

My jQuery Code

$('#send').click(function(){
var image1.name = $('#images').files[0].name;
var image1.size = $('#images').files[0].size;
alert(image1.name + ' - ' + image1.size);});

Upvotes: 4

Views: 2723

Answers (3)

Eric
Eric

Reputation: 1

how to accomplish this with multiple file inputs

<input type="file" id="file1" name="file1"><br> <input type="file" id="file2" name="file2">

results:

  • filename1 - 111bytes
  • filename2 - 456bytes
  • Total bytes: 567bytes

Solution: multiple with 1 file input works great. For additional file inputs, simply repeat the code using different var names now if only you can shorten the code to change number in a var name

example: var i = 0 or 1 or 2 var filename+i = filename1 or filename2 or filename3

Upvotes: 0

adeneo
adeneo

Reputation: 318202

You'd have to iterate over the files property

$('#send').on('click', function() {

  var files = $('#images').get(0).files;

  $.each(files, function(_, file) {
    console.log('name : ' + file.name + ' --- ', 'size : ' + file.size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" id="images" multiple="multiple">
  <input type="button" id="send" value="Send">
</form>

Upvotes: 2

Renzo Calla
Renzo Calla

Reputation: 7696

use files attribute from the input 

$('#send').click(function(){

var files = $('#images')[0].files;

for(var i = 0; i<files.length; i++){
 console.log(files[i].name+'----'+files[i].size);
}

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="images" multiple="multiple">
<input type="submit" id="send">

Upvotes: 0

Related Questions