Question

我当前的代码只能从HTML客户端幻灯片中删除文件，而不能从实际文件列表中删除文件。意思是，即使文件已被视觉删除，但当我上传文件时，文件仍然保持上传状态。

我该怎么做，从文件列表中上传，以使删除的文件在我点击“上传”按钮后就不会上传？

Answer 1

带有HTMLInputElement的{{1}}产生一个type="file"对象，该对象包含文件列表。 FileList对象是只读对象，无法修改。

因此，尽管您可以从自定义FileList数组中删除文件并使用短列表来构建您的UL，但是您不能修改list的属性FileList。

因此，解决方案是创建一个HTMLInputElement对象，并使用表单元素填充该对象，然后将文件列表分别附加到表单元素。

类似的事情应该起作用：

new FormData()

var formData = new FormData();
var fileList = [];
var fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', setList);
document.querySelector('form').addEventListener('submit', sendModifiesList);

function setList() {
  //Convert the FileList Object to an Array of File Objects
  fileList = Array.from(fileInput.files);
  outputList();
}


function sendModifiesList(e) {
  e.preventDefault();
  fileList.forEach(function(file) {
    formData.append('fileList[]', file);
  });
  console.log("These files will be posted: ", formData.getAll("fileList[]"));
  /*************** EDIT *************************/
  // Get the url from the form's action attribute
  let url = document.forms[0].action;
  let request = new XMLHttpRequest();
  // Create a POST request
  request.open("POST", url);
  // Set up an onload handler to report status
  request.onload = function() {
    if (request.status == 200) {
      console.log("Uploaded!");
    } else {
      console.log("Error " + request.status + " occurred when trying to upload your file.");
    }
  };
  // Send the form to the server 
  request.send(formData);
  /************ END EDIT ***********************/
};

function outputList() {
  var output = document.getElementById('fileList');
  var nodes = document.createElement('ul');
  fileList.forEach((file, i) => {
    var node = document.createElement('li');
    var filename = document.createTextNode(file.name);
    var removeLink = document.createElement('a');
    removeLink.href = 'javascript:void(0)';
    removeLink.innerHTML = 'Remove';
    removeLink.onclick = function() {
      // Remove item
      fileList.splice(i, 1);
      outputList();
    }
    node.appendChild(filename);
    node.appendChild(removeLink);
    nodes.appendChild(node);
  });
  output.innerHTML = '';
  output.appendChild(nodes);
}

通过单击多个输入文件中的删除链接来删除所选文件

1 个答案: