JavaScript中如何实现多次选择文件不覆盖已选文件？

嗨，这个问题我之前也踩过坑！原生的<input type="file">确实默认每次选择都会替换掉之前的文件，不过咱们可以通过手动维护一个文件数组来实现追加选择的效果，具体方案如下：

核心思路 #

咱们需要自己保存所有已选择的文件，每次用户新选文件时，把新文件追加到这个数组里，而不是依赖input自带的files属性（它每次都会被重置）。另外还要处理一个小细节：如果用户重复选择同一个文件，默认不会触发change事件，所以得每次点击按钮后重置input的value。

完整代码示例 #

HTML部分 #

<!-- 隐藏的文件选择框 -->
<input ref="inptFile" type="file" id="selectedFile" name="files" multiple style="display: none;"/>
<!-- 触发选择的按钮 -->
<input type="button" value="Browse..." onclick="triggerFileSelect();" />
<!-- 可选：用来展示已选文件列表 -->
<div id="fileList"></div>

JavaScript部分 #

// 用来存储所有已选择的文件
let selectedFiles = [];

// 触发文件选择框的点击
function triggerFileSelect() {
  const fileInput = document.getElementById('selectedFile');
  // 重置value，确保重复选择同一个文件也能触发change事件
  fileInput.value = '';
  fileInput.click();
}

// 处理文件选择事件
document.getElementById('selectedFile').addEventListener('change', function(e) {
  const newFiles = Array.from(e.target.files);
  // 把新选择的文件追加到数组里
  selectedFiles = [...selectedFiles, ...newFiles];
  
  // 可选：更新页面上的文件列表展示
  updateFileList();
});

// 可选：更新已选文件的展示
function updateFileList() {
  const fileListEl = document.getElementById('fileList');
  fileListEl.innerHTML = '';
  
  selectedFiles.forEach((file, index) => {
    const fileItem = document.createElement('div');
    fileItem.textContent = `${index + 1}. ${file.name} (${(file.size / 1024 / 1024).toFixed(2)}MB)`;
    fileListEl.appendChild(fileItem);
  });
}

// 当你需要提交文件时，就用selectedFiles数组
// 比如创建FormData：
function submitFiles() {
  const formData = new FormData();
  selectedFiles.forEach(file => {
    formData.append('files[]', file);
  });
  // 这里可以用fetch或者XMLHttpRequest发送formData
  // fetch('/upload', { method: 'POST', body: formData })
}

关键细节解释 #

• 手动维护文件数组：selectedFiles数组会一直保存所有已选的文件，每次新选的文件都会被追加进去，不会被覆盖。
• 重置input的value：如果不重置，当用户再次选择之前选过的文件时，input的value没有变化，就不会触发change事件，重置后就能正常触发了。
• 合并文件列表：用扩展运算符[...selectedFiles, ...newFiles]把新旧文件数组合并，比用push.apply更简洁直观。

这样处理后，用户每次点击Browse按钮选择的文件都会被添加到已选列表里，不会覆盖之前的文件啦！

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