javascript - 检测选择了多少文件输入，并在达到限制后切换div

我有两个文件输入。当它们都选择了文件时，我希望#next2 div进入。

我不确定自己在做什么错。我是否能正确选择多少个输入的长度？

任何帮助表示赞赏。

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>

最佳答案

我不确定自己在做什么错。


您仅在检查.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>

关于javascript - 检测选择了多少文件输入，并在达到限制后切换div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42145400/