计算空文件上传控件

Question

In a dynamically generated set of file upload controls:

<input type="file" name="archivos[]">
<input type="file" name="archivos[]">
<input type="file" name="archivos[]">
// ...

... I can easily count the non-empty ones:

// Works fine
var nonEmptyCount = $("input[type='file'][name='archivos[]'][value!='']").length;

However, when I try to count the empty ones (what I actually need) the selector never matches anything:

// Always zero
var emptyCount = $("input[type='file'][name='archivos[]'][value='']").length;

I can't believe I need this cumbersome code:

// Works but ugly
var emptyCount = $("input[type='file'][name='archivos[]']").length -
    $("input[type='file'][name='archivos[]'][value!='']").length;

What bit am I missing?

Answer 1

One solution is to check if value is empty inside an iterator like:

 $("#findEmpty").on("click", function() { var count = 0; $(":file[name='archivos[]']").each(function() { if (this.value == "") { count++; } }); alert(count); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="archivos[]" /> <input type="file" name="archivos[]" /> <input type="file" name="archivos[]" /> <input type="file" name="archivos[]" /> <input type="file" name="archivos[]" /> <input type="file" name="archivos[]" /> <input type='button' value='Check Empty' id='findEmpty' /> 

Answer 2

You can filter them this way:

var emptyOne = $("input[type='file'][name='archivos[]']").filter(function () {
        return $(this).val() == "";
    });

 $(function () { var emptyOne = $("input[type='file'][name='archivos[]']").filter(function () { return $(this).val() == ""; }); alert(emptyOne.length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <input type="file" name="archivos[]"> <input type="file" name="archivos[]"> <input type="file" name="archivos[]"> 

EXAMPLE FIDDLE

Answer 3

I don't have an explanation (and I'll immediately accept any answer that provides one) but the root cause seems to be using the generic attribute equals selector to find the controls:

$("input[type='file']")

If I use the jQuery extension short-cut , everything else works as expected:

$("input:file")

As per the docs:

• Both selectors should behave identically
• [type='file'] should perform better

... so there must be a bug somewhere.