javascript - 输入文件处理

Question

我有一段正在运行的代码....当用户单击选择文件时，它允许我在列表中显示多个文件。代码工作正常。但是，我想弄清楚是否可以追加到列表中，而不是每次都创建一个新列表。我下午的大部分时间都在研究这个，绝大多数文章都说这并不容易。我应该改用 FormData 方法吗？那会给我买什么吗？

这是我的Javascript代码......它工作正常......

    window.onload = function() {
      const inputElement = document.getElementById("my_files");
      const fileNames = document.getElementById("file_names");
      let fileList = [];
    
      function removeFile(event) {
        event.preventDefault();
    
        let filename = this.dataset.filename;
        let modifiedFileList = new DataTransfer();
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].name !== filename) {
            modifiedFileList.items.add(fileList[i]);
          }
        }
    
        inputElement.files = modifiedFileList.files;
        fileList = inputElement.files;
        handleFiles(fileList);
        return false;
      }
    
      inputElement.addEventListener("change", handleFilesListener, false);
      function handleFilesListener() {
        fileList = this.files;
        handleFiles(fileList);
      }
    
      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);
        }
      }
    }

同样，我试图弄清楚是否可以附加到此列表，而不是在列表更改时不断循环遍历它。我确实尝试做一个追加而不是在下面添加......但这没有用。我自称是新手……所以请对我放轻松。:)。

let filename = this.dataset.filename;
            let modifiedFileList = new DataTransfer();
            for (let i = 0; i < fileList.length; i++) {
              if (fileList[i].name !== filename) {
                modifiedFileList.items.add(fileList[i]);
              }
            }

在此先感谢您的任何指点。

标签： javascript