javascript - 获取多个多文件输入字段的文件计数

Question

我正在尝试创建一个页面，人们可以一次上传多张照片以制作幻灯片。现在，我已经有了获取多个文件的代码:

<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" size="20" />

以及计算表单中实际选择了多少张照片的代码:

alert(document.getElementById('filesToUpload').files.length);

问题出在用户实际上想要制作多个幻灯片时。如果是这样，我不能再使用上面的代码，但仍然需要保持输入只有一个名称，以便实际上传文件的 PHP 文件可以保持简单。

如果我确实使用上面的代码，则只会计算第一个文件输入字段。

实际上有没有办法计算具有相同名称的多个文件输入字段？

Answer 1

Is there actually a way to count several fileinput fields with the same ID?

document 中元素的

id 应该是唯一的。将 class 替换为 id。

您可以使用 .querySelectorAll(".filesToUpload") 到每个 ".filesToUpload" 元素的 NodeList，将结果传递给Array.from() 从 NodeList 创建一个数组，迭代该数组并返回一个对象，其中元素在 NodeList 中的索引和.files .length 是返回对象的属性。

您还可以使用.reduce()从.map()返回的数组中获取上传文件的总数。

<form>
  <input type="file" name="filesToUpload[]" class="filesToUpload" multiple="multiple" size="20" />
  <input type="file" name="filesToUpload[]" class="filesToUpload" multiple="multiple" size="20" />
  <input type="file" name="filesToUpload[]" class="filesToUpload" multiple="multiple" size="20" /><br><br>
  <input type="submit">
</form>
<script>
  const inputs = Array.from(document.querySelectorAll(".filesToUpload"));
  const form = document.forms[0];
  form.onsubmit = function(e) {
    e.preventDefault();
    
    let fileIndexes = inputs.map(function(input, index) {
      return {files: input.files.length, filesToUploadIndex: index}
    });
    
    let filesTotal = {filesTotal:fileIndexes.reduce(function(a, b) {
      return a + b.files
    }, 0)};
    
    console.log(fileIndexes, filesTotal)
  }
</script>