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

我正在尝试创建一个页面，人们可以一次上传多张照片以制作幻灯片。现在，我已经有了获取多个文件的代码：<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" size="20" />以及计算表格中实际选择了多少张照片的代码：alert(document.getElementById('filesToUpload').files.length);问题出在用户实际要制作多个幻灯片时。如果是这样，我将无法再使用上面的代码，但是仍然需要保持输入中只有一个名称，因此实际上传文件的PHP文件可以保持简单。如果我确实使用上面的代码，那么将只计算第一个fileinput字段。实际上有一种方法可以计算具有相同名称的几个文件输入字段吗？ 最佳答案 实际上有一种方法可以用  相同的ID？id中元素的document应该是唯一的。将class替换为id。您可以对每个.querySelectorAll(".filesToUpload")元素的NodeList使用".filesToUpload"，将结果传递给Array.from()以从NodeList创建数组，迭代该数组并返回一个对象，其中元素在和NodeList .files是返回对象的属性。您也可以使用.length从.reduce()返回的数组中获取上传文件的总数。<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>