我如何从FileList中删除一个文件
我正在使用HTML5构建拖放上传Web应用程序，并将文件放到div上，当然还要获取dataTransfer对象，这会给我FileList。
现在我想删除一些文件，但我不知道如何，或者甚至可能。
最好我想从FileList中删除它们; 我对他们没有用处。 但是，如果这是不可能的，我是否应该在与FileList交互的代码中写入检查？ 这看起来很麻烦。
如果你只想删除几个选定的文件：你不能。 您链接到的File API工作草案包含一个注释：
HTMLInputElement接口[HTML5]具有只读的 FileList属性，[...]
[强调我的]
读了一下HTML5工作草案，我发现了Common input元素的API。 看来您可以通过将input对象的value属性设置为空字符串来删除整个文件列表，如下所示：
document.getElementById('multifile').value = "";
顺便说一句，从Web应用程序使用文件也可能是有趣的。
这个问题已被标记为答案，但我想分享一些可能帮助其他人使用FileList的信息。
将FileList作为数组处理会很方便，但排序，移位，弹出和切片等方法不起作用。 正如其他人所建议的那样，您可以将FileList复制到数组中。 但是，不是使用循环，而是使用简单的一行解决方案来处理此转换。
// 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 +中测试成功
由于我们在HTML5领域，这是我的解决方案。 要点是你将文件推送到数组而不是将它们留在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."));