如何在选择更多文件时保留input files对象中已选中的待上传文件？

我正在开发一个支持上传前多次预览、添加和删除文件的上传页面，预览功能已正常实现，但上传时出现问题——只会上传文件选择器最后一次从本地选中的文件列表里的文件。比如某次操作后，预览区域剩余10张照片，但实际仅上传了3张图片：

预览区域显示10张图片（原截图内容）

FileList {0: File, 1: File, 2: File, length: 3}
    0: File {name: '3-9.jpg.webp', lastModified: 1657529033690, lastModifiedDate: Mon Jul 11 2022 13:13:53 GMT+0430 (Iran Daylight Time), webkitRelativePath: '', size: 31082, …}
    1: File {name: '10-1-2.jpg.webp', lastModified: 1657529077864, lastModifiedDate: Mon Jul 11 2022 13:14:37 GMT+0430 (Iran Daylight Time), webkitRelativePath: '', size: 47664, …}
    2: File {name: '11-4.jpg.webp', lastModified: 1657529004794, lastModifiedDate: Mon Jul 11 2022 13:13:24 GMT+0430 (Iran Daylight Time), webkitRelativePath: '', size: 49742, …}
    length: 3
    [[Prototype]]: FileList

问题原因 #

FileList是浏览器提供的只读对象，每次通过文件选择器选中新文件时，它会直接替换原有对象，而非追加内容。你之前的预览操作只是在DOM层面展示了所有选中过的文件，但实际提交时仍使用了最后一次生成的FileList。

解决方法 #

手动用数组维护所有待上传文件，脱离对文件选择器FileList的依赖：

1. 初始化文件数组

// 全局或局部作用域声明数组，存储所有待上传文件
let uploadFiles = [];

2. 处理文件选择事件
   将新选中的文件追加到数组，再更新预览：

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  // 将FileList转为数组并追加到uploadFiles
  uploadFiles.push(...Array.from(this.files));
  // 调用你的预览更新函数，基于uploadFiles生成预览
  updatePreview(uploadFiles);
});

3. 处理文件删除操作
   删除预览项时同步从数组移除对应文件：

// 示例：根据索引删除文件，需结合你的预览DOM结构调整
function removeFile(index) {
  uploadFiles.splice(index, 1);
  updatePreview(uploadFiles);
}

4. 提交上传请求
   用FormData将数组中的文件添加后提交：

function submitUpload() {
  const formData = new FormData();
  // 批量添加文件到FormData
  uploadFiles.forEach(file => {
    formData.append('files[]', file);
  });
  
  // 发起上传请求（示例用fetch，可替换为axios等）
  fetch('/your-upload-api', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => console.log('上传完成', data))
  .catch(err => console.error('上传失败', err));
}

这样就能保证上传的文件与预览区域展示的内容完全一致。

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