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

在向文档添加动态元素时，必须将选择器的语法更改为此：
```
$(document).on("change",'.upload-container .upload',function () {})
```
您应该遍历所有.upload元素以计算文件总数。
您将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>

计算将多少文件附加到许多输入

1 个答案: