如何从FileList中删除一个文件
我正在使用HTML5构build一个拖放上传的Web应用程序，并将文件放到一个div上，当然还要获取dataTransfer对象，这个对象给了我一个FileList 。
现在我想删除一些文件，但我不知道如何，甚至可能。
最好我只想从FileList中删除它们; 我对他们没有用处。 但是，如果这是不可能的，我应该写在与FileList交互的代码检查？ 这似乎很麻烦。
如果你只想删除几个选定的文件，你不能。 您链接到的File API工作草案包含一个注释：
HTMLInputElement接口[HTML5]具有只读的FileList属性，
[强调我的]
读了一下HTML5工作草案，我发现了Common input元素的API 。 看来你可以通过设置input对象的value属性为空string来删除整个文件列表，如：
document.getElementById('multifile').value = "";
顺便说一句， 从Web应用程序使用文件的文章也可能是有趣的。
这个问题已经被标记为答案，但我想分享一些可能帮助其他人使用FileList的信息。
将FileList作为一个数组来处理会很方便，但是sorting，移位，popup和切片等方法不起作用。 正如其他人所build议的，您可以将FileList复制到一个数组。 但是，不是使用循环，而是使用简单的一行解决scheme来处理这种转换。
// fileDialog.files is a FileList var fileBuffer=[]; // append the file list to an array Array.prototype.push.apply( fileBuffer, fileDialog.files ); // <-- here // And now you may manipulated the result as required // shift an item off the array var file = fileBuffer.shift(0,1); // <-- works as expected console.info( file.name + ", " + file.size + ", " + file.type ); // sort files by size fileBuffer.sort(function(a,b) { return a.size > b.size ? 1 : a.size < b.size ? -1 : 0; });
在FF，Chrome和IE10 +中testing成功
由于我们在HTML5领域，这是我的解决scheme。 要点是你将文件推送到一个数组，而不是把它们留在一个FileList中，然后使用XHR2，将这些文件推送到一个FormData对象。 下面的例子。
Node.prototype.replaceWith = function(node) { this.parentNode.replaceChild(node, this); }; if(window.File && window.FileList) { var topicForm = document.getElementById("yourForm"); topicForm.fileZone = document.getElementById("fileDropZoneElement"); topicForm.fileZone.files = new Array(); topicForm.fileZone.inputWindow = document.createElement("input"); topicForm.fileZone.inputWindow.setAttribute("type", "file"); topicForm.fileZone.inputWindow.setAttribute("multiple", "multiple"); topicForm.onsubmit = function(event) { var request = new XMLHttpRequest(); if(request.upload) { event.preventDefault(); topicForm.ajax.value = "true"; request.upload.onprogress = function(event) { var progress = event.loaded.toString() + " bytes transfered."; if(event.lengthComputable) progress = Math.round(event.loaded / event.total * 100).toString() + "%"; topicForm.fileZone.innerHTML = progress.toString(); }; request.onload = function(event) { response = JSON.parse(request.responseText); // Handle the response here. }; request.open(topicForm.method, topicForm.getAttribute("action"), true); var data = new FormData(topicForm); for(var i = 0, file; file = topicForm.fileZone.files[i]; i++) data.append("file" + i.toString(), file); request.send(data); } }; topicForm.fileZone.firstChild.replaceWith(document.createTextNode("Drop files or click here.")); var handleFiles = function(files) { for(var i = 0, file; file = files[i]; i++) topicForm.fileZone.files.push(file); }; topicForm.fileZone.ondrop = function(event) { event.stopPropagation(); event.preventDefault(); handleFiles(event.dataTransfer.files); }; topicForm.fileZone.inputWindow.onchange = function(event) { handleFiles(topicForm.fileZone.inputWindow.files); }; topicForm.fileZone.ondragover = function(event) { event.stopPropagation(); event.preventDefault(); }; topicForm.fileZone.onclick = function() { topicForm.fileZone.inputWindow.focus(); topicForm.fileZone.inputWindow.click(); }; } else topicForm.fileZone.firstChild.replaceWith(document.createTextNode("It's time to update your browser."));
如果您的目标是常规浏览器（Chrome浏览器，Firefox，Edge，但也适用于Safari 9+），或者您可以购买一个polyfill，则可以使用Array.from()将FileList变成一个数组：
let fileArray = Array.from(fileList);
那么很容易像处理其他数组一样处理File数组。
我知道这是一个老问题，但在这个问题上它在search引擎上排名很高。
FileList对象中的属性不能被删除，但至less在Firefox上它们可以被改变 。 我的解决方法是这个问题是添加一个属性IsValid=true到那些文件通过检查和IsValid=false的那些没有。
然后我只是通过列表循环，以确保只有具有IsValid=true的属性被添加到FormData 。
有可能是一个更优雅的方式来做到这一点，但这是我的解决scheme。 用Jquery
fileEle.value = ""; var parEle = $(fileEle).parent(); var newEle = $(fileEle).clone() $(fileEle).remove(); parEle.append(newEle);
基本上，你切入input的价值。 克隆它，把克隆代替旧的。
如果您有幸运用文件向数据库发送了发布请求，并且您有要发送到DOM的文件
你可以简单地检查文件列表中的文件是否存在于你的DOM中，当然如果不是你只是不发送这个元素到DB中。
您可能希望创build一个数组，并使用它来代替只读文件列表。
var myReadWriteList = new Array(); // user selects files later... // then as soon as convenient... myReadWriteList = FileListReadOnly;
在那之后，你要上传你的清单而不是内置清单。 我不确定你正在使用的上下文，但我正在使用一个我find的jquery插件，而我所要做的就是使用插件的源代码，并使用<script>标签将其放在页面中。 然后在源代码之上添加我的数组，以便它可以充当全局variables，插件可以引用它。
那么这只是一个交换引用的问题。
我认为这将允许你再次添加拖放，如果内置列表是只读的，那么你还可以如何将被拖放的文件放入列表中？
:)）
