如何为多文件上传input控件动态追加文件，避免覆盖已选文件？

原生<input type="file">控件的FileList对象为只读属性，每次重新选择文件会直接覆盖原有内容，无法直接在原FileList基础上追加。可以通过自行维护全局文件数组的方式实现追加效果，无需每次重复选择全部文件

具体实现代码 #

HTML部分 #

<input onchange="getFiles()" type="file" name='files[]' id="customFile" multiple />
<button onclick="submitFiles()">提交上传</button>

JS逻辑部分 #

// 全局数组存储所有已选文件
let selectedFileList = [];

function getFiles() {
  // 获取本次新选中的文件，转为数组格式
  const newSelectedFiles = Array.from($('#customFile').get(0).files);

  // 可选逻辑：重复文件过滤，避免重复添加相同文件
  newSelectedFiles.forEach(file => {
    const isExist = selectedFileList.some(existFile => {
      return existFile.name === file.name 
        && existFile.size === file.size 
        && existFile.lastModified === file.lastModified
    });
    if(!isExist) selectedFileList.push(file);
  })

  // 打印当前所有已选文件
  console.log('已选文件：', selectedFileList);

  // 清空input值，避免下次选择相同文件不触发onchange事件
  $('#customFile').val('');
}

// 上传提交逻辑
function submitFiles() {
  if(selectedFileList.length === 0) {
    alert('请先选择文件');
    return;
  }
  // 构建FormData参数
  const formData = new FormData();
  selectedFileList.forEach((file, index) => {
    formData.append(`files[${index}]`, file);
  })

  // 在此处添加你的AJAX提交逻辑即可
  // $.ajax({
  //   url: '你的后端上传接口地址',
  //   method: 'POST',
  //   data: formData,
  //   processData: false,
  //   contentType: false,
  //   success: res => console.log('上传成功', res)
  // })
}

注意事项 #

• 该方案仅支持通过AJAX携带FormData提交上传，无法直接序列化原生表单提交
• 如果需要实现删除已选文件的功能，直接操作selectedFileList数组即可

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