Обнаружение количества входных файлов в файле и после достижения предела для переключения div

Question

У меня есть два входных файла. Когда у них есть оба файла, я хочу, чтобы div #next2 переключился.

Я не уверен, что я делаю неправильно. Я получаю длину, сколько входов выбрано правильно?

Любая помощь приветствуется.

jQuery.fn.fadeBoolToggle = function(bool) { 
 
    return bool ? this.fadeIn(400) : this.fadeOut(400); 
 
} 
 
$(".upload-img[type='file']").change(function() { 
 
     var files = $(this).prop("files"); 
 
     $('#next2').fadeBoolToggle($(files).length == 2).addClass('block'); 
 
    });

#next2 { 
 
    display: none; 
 
} 
 
.block { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="POST" enctype="multipart/form-data" runat="server"> 
 
    <input type="file" id="brokerage-logo-input" class="upload-img"> 
 
    <input type="file" id="personal-pic-input" class="upload-img"> 
 
</form> 
 
<div class="proceed-btn sans-pro" id="next2"><span class="proceed-btn-text">PROCEED</span></div>

Answer 1

Я не уверен, что я делаю неправильно.

Вы только проверяете .files свойства this элемента, который будет 1, если пользователь выбрал файл, без multiple множества атрибутов. Вы не проверяете свойство .files каждого элемента <input type="file">.

Вы можете создать массив input элементов, используйте Array.prototype.every() итерировать .files свойство каждого input элемента, вернуть Boolean оценку .files.length для обоих <input type="file"> элементов.

jQuery.fn.fadeBoolToggle = function(bool) { 
 
    return bool ? this.fadeIn(400) : this.fadeOut(400); 
 
} 
 
var inputs = $(".upload-img[type='file']"); 
 
inputs.change(function() { 
 
    var bool = Array.prototype.every.call(inputs, function(input) { 
 
       return input.files.length 
 
      }); 
 
    $('#next2').fadeBoolToggle(bool).addClass('block'); 
 
});

#next2 { 
 
    display: none; 
 
} 
 
.block { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form method="POST" enctype="multipart/form-data" runat="server"> 
 
    <input type="file" id="brokerage-logo-input" class="upload-img"> 
 
    <input type="file" id="personal-pic-input" class="upload-img"> 
 
</form> 
 
<div class="proceed-btn sans-pro" id="next2"><span class="proceed-btn-text">PROCEED</span> 
 
</div>

Answer 2

Вы можете проверить, что каждый вход имеет значение внутри Try в $ .each

изменить сценарий таким образом, и на работе.

$(".upload-img[type='file']").change(function() { 
    var allSelected = 0; 
    var numOfInput = $(".upload-img[type='file']").length; 
    $.each($(".upload-img[type='file']"), function(idx, val){ 
     if($(val).val().length){ 
      allSelected++; 
     }; 
    }) 

    $('#next2').fadeBoolToggle(allSelected==numOfInput).addClass('block'); 

});