javascript - 计算有多少文件附加到许多输入

Question

我有一个代码，当用户点击一个输入(type="file")时，创建另一个输入。我想计算附加到所有输入的所有文件的数量，而不仅仅是一个。
实际上，我的代码只是计算第一个输入中的文件数，而不是它们的总数:

<div class="upload-container">
  <input type="file" multiple="multiple" class="upload" onclick="boomFunction(this)">
</div>
<p id="total_count"></p>

<script>
function boomFunction(obj) {
            $(".upload-container").append("<input type='file' multiple='multiple' class='upload' onclick='boomFunction(this)'>");
}
$(document).ready(function(){
              $('.upload-container .upload').change(function () {
                $('#total_count').text(this.files.length + " files selected");
              });
            });
</script>

https://jsfiddle.net/bf2tcu5g/

Answer 1

1. 当您向文档中添加动态元素时，您必须将选择器的语法更改为:

   $(document).on("change",'.upload-container .upload',function () {})
   

2. 您应该遍历所有 .upload 元素以计算文件总数。

3. 您将 id="upload" 设置为新元素时出错。应该是 class="upload"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload-container">
  <input type="file" multiple="multiple" class="upload" onclick="boomFunction(this)">
</div>
<p id="total_count"></p>

<script>
function boomFunction(obj) {
  $(".upload-container").append("<input type='file' multiple='multiple' class='upload' onclick='boomFunction(this)'>");
}
$(document).ready(function(){
  $(document).on("change",'.upload-container .upload',function () {
      var total=0;
     $(".upload").each(function(){
       total=total+this.files.length;
     })
     $('#total_count').text(total + " files selected");
  });
});
</script>