4

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

3 Answers 3

2

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>

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

Comments

0

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">

1 Comment

Its Going well! Thanks a Lot!! _/_
0

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

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.