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

Question

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

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

Answer 1

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

因此，尽管您可以从自定义list数组中删除文件并使用简短列表来构建UL，但是您不能修改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); } 

 <form action="/test.aspx"> <input type="file" multiple> <input type="submit"> </form> <div id="fileList"></div>