如何从文件列表中删除文件

javascript html drag-and-drop filelist

2022-08-30 02:45:24

我正在使用HTML5构建一个拖放到上传的Web应用程序，我将文件拖放到div上，当然还要获取dataTransfer对象，这给了我FileList。

现在我想删除一些文件，但我不知道如何，或者它是否可能。

最好是我想从文件列表中删除它们;我对他们没有用处。但是，如果这是不可能的，我是否应该在与 FileList 交互的代码中编写签入？这似乎很麻烦。

答案 1

如果您只想删除多个选定的文件：则不能。您链接到的文件 API 工作草稿包含一条注释：

该接口 [HTML5] 具有只读属性 [...]
[强调我的]HTMLInputElementFileList

阅读一些HTML 5工作草案，我遇到了通用输入元素API。看起来您可以通过将对象的属性设置为空字符串来删除整个文件列表，例如：valueinput

document.getElementById('multifile').value = "";

顺便说一句，文章使用来自Web应用程序的文件也可能很有趣。

答案 2

这个问题已经被标记为已回答，但我想分享一些可能有助于其他人使用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+ 中测试正常