CODEWITHSUNDEEP
javascriptjqueryfile-uploadcount
Dylan Cross
Dylan Cross

Reputation: 5986

Count number of files in input box with jQuery?

How can I count the number of files that are in the file upload input using jQuery?

I have tried this but it always returns 1:

$("body").on("change", ".create-album .custom-file-input .createAlbumFileUpload", function(){   

    var numFiles = $("input:file", this).length;
    alert(numFiles);
});

My HTML:

<form enctype="multipart/form-data" class="createAlbumFileUpload">
    <input type="file" name="uploadFile[]" multiple="multiple"/>
</form>

I found this jsFiddle on another question asking the same thing, however I can't see why mine isn't working?

Upvotes: 6

Views: 29555

Answers (3)

Smit Patel
Smit Patel

Reputation: 3247

You can also try with this,

Take the input in Div and give an id,

var count =  $('#divPhoto').children().length; // You'll get the length in this.

Upvotes: 1

Rajpal Singh
Rajpal Singh

Reputation: 311

You can easily check with below code and https://jsfiddle.net/vvz3a4qp/2/ :

HTML:

<form name="myForm" enctype="multipart/form-data">
<input type="text" name="name">
<input type="file" name="name1" >
<input type="file" name="name2" ><br><br>
<span id="total"></span>
</form>

JS:

 $("body").change(function(){
            alert($(":file").length);
            $("#total").html($("input[type=file]").length);
      });

Upvotes: 0

Kevin B
Kevin B

Reputation: 95031

The fiddle you provided contains the answer.

var numFiles = $("input:file", this)[0].files.length;

http://jsfiddle.net/xvLAc/1/

Upvotes: 20

Related Questions