JavaScript处理HTML多文件输入：获取多张图片转JSON失败问题排查

错误原因 #

你当前的代码使用document.querySelector("#image")获取文件输入元素，这个方法只会返回页面中第一个匹配id="image"的元素。但你是通过点击按钮添加多个文件输入项，这些新增的输入项如果也设置了id="image"，就会导致后续的输入元素无法被选中，最终只能收集到第一个输入项里的文件。

另外，你的代码存在语法小问题：函数末尾的注释// }和外层的}重复，不过这不是文件收集不全的核心原因。

解决步骤 #

1. 给所有文件输入项设置相同的class（HTML中id必须唯一，不能重复使用），比如class="image-input"。
2. 使用document.querySelectorAll(".image-input")获取所有文件输入元素，遍历每个元素并收集其中的文件。

修改后的代码 #

function save() {
  // 获取所有文件输入元素
  const fileInputs = document.querySelectorAll(".image-input");
  const arr = [];

  // 遍历每个输入元素
  fileInputs.forEach(input => {
    // 遍历当前输入元素选中的所有文件
    for (let i = 0; i < input.files.length; i++) {
      arr.push({
        image: input.files[i].name
      });
    }
  });

  const json = JSON.stringify(arr);
  console.log("JSON", json);
}

对应的文件输入项HTML示例：

<!-- 初始文件输入 -->
<input type="file" class="image-input" />
<!-- 点击Add image按钮新增的输入项统一使用该class -->
<input type="file" class="image-input" />

这样无论添加多少个文件输入项，所有选中的文件名都会被收集到数组中，最终生成你期望的JSON格式。

内容的提问来源于stack exchange，提问作者Marka