JavaScript多文件选择列表如何实现追加而非每次重新生成咨询

方案结论 #

• 你完全可以用FormData实现需求，该方案能完美满足文件追加的要求，实现逻辑比你当前操作DataTransfer的方案更简单
• 你之前尝试替换add为append不生效是因为DataTransfer.items原生API仅提供add方法添加文件，不存在append方法

优化实现方案 #

你不需要绑定input元素的files属性来维护文件列表，自己维护全局文件数组即可，修改后的完整代码如下：

window.onload = function() {
  const inputElement = document.getElementById("my_files");
  const fileNames = document.getElementById("file_names");
  // 全局维护文件数组，不用和input.files绑定
  let fileList = [];
  // 如果用AJAX提交，直接声明全局FormData即可
  let formData = new FormData();

  function removeFile(event) {
    event.preventDefault();
    const filename = this.dataset.filename;
    // 直接过滤数组，不需要每次遍历重建DataTransfer
    fileList = fileList.filter(file => file.name !== filename);
    // 如果用FormData提交，这里也要同步删除FormData里的对应文件
    formData.delete('file', filename);
    handleFiles(fileList);
    return false;
  }

  inputElement.addEventListener("change", handleFilesListener, false);
  function handleFilesListener() {
    // 追加新选中的文件，而不是替换全局列表
    const newFiles = Array.from(this.files);
    fileList.push(...newFiles);
    // 同步添加到FormData
    newFiles.forEach(file => {
      formData.append('file', file);
    })
    handleFiles(fileList);
    // 清空input的值，避免重复选择同个文件不触发change事件
    this.value = '';
  }

  function handleFiles(fileList) {
    fileNames.textContent = '';
    for (let i = 0; i < fileList.length; i++) {
      let listElement = document.createElement("li");
      let textNode = document.createTextNode(fileList[i].name);

      listElement.appendChild(textNode);
      listElement.setAttribute("class","attachmentname");

      let removeButton = document.createElement("button");

      removeButton.innerHTML = "Remove&nbsp";
      removeButton.setAttribute('type', 'button')
      removeButton.setAttribute("class", "button121");
      removeButton.setAttribute('data-filename', fileList[i].name)
      removeButton.addEventListener('click', removeFile)
      listElement.appendChild(removeButton);
      fileNames.appendChild(listElement);
    }
  }
}

提交说明 #

• 如果用AJAX提交请求，直接把上面的formData实例作为请求体发送即可，不需要额外处理
• 如果用原生表单同步提交，只需要在表单提交前，把fileList数组遍历添加到DataTransfer实例，再赋值给inputElement.files即可

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