Count number of files in input box with jQuery?

Question

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?

Answer 1

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.

Answer 2

The fiddle you provided contains the answer.

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

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

Answer 3

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