javascript js创建文件 - 如何从FileList中删除文件




js写文件 js上传文件 (9)

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

现在我想删除一些文件,但我不知道如何,或者甚至可能。

我最好只想从FileList中删除它们; 我对他们毫无用处。 但是,如果那是不可能的,那么我是否应该在代码中写入与FileList交互的代码? 这似乎很麻烦。


Answers

我知道这是一个老问题,但它在搜索引擎方面的排名很高。

无法删除FileList对象中的属性,但至少在Firefox 上可以更改它们 。 我解决这个问题的方法是将一个属性IsValid=true添加到那些通过check和IsValid=false文件中。

然后我只是遍历列表以确保只有具有IsValid=true的属性被添加到FormData


如果您的目标是常绿浏览器(Chrome,Firefox,Edge,但也可以在Safari 9+中使用),或者您可以支付polyfill,则可以使用Array.from()将FileList转换为数组:

let fileArray = Array.from(fileList);

然后像任何其他数组一样容易处理File的数组。


如果您有幸使用文件向数据库发送发布请求,并且您拥有要在DOM中发送的文件

您可以简单地检查文件列表中的文件是否存在于您的DOM中,当然如果不是您只是不将该元素发送到de DB。


如果您只想删除几个选定的文件:您不能。 您链接到的FileList包含一个注释:

HTMLInputElement接口[HTML5]具有只读的 FileList属性,[...]
[强调我的]

阅读一下HTML 5 Working Draft,我遇到了Common input元素API 。 看来你可以通过将input对象的value属性设置为空字符串来删除整个文件列表,如:

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

顺便说一句,文章使用来自Web应用程序的文件也可能是有意义的。


您可能希望创建一个数组并使用它而不是只读文件列表。

var myReadWriteList = new Array();
// user selects files later...
// then as soon as convenient... 
myReadWriteList = FileListReadOnly;

在此之后,您将根据列表而不是内置列表进行上传。 我不确定您正在使用的上下文,但我正在使用我发现的jquery插件,我必须做的是获取插件的源代码并使用<script>标签将其放入页面中。 然后在源代码上方添加了我的数组,以便它可以充当全局变量,插件可以引用它。

然后,这只是交换引用的问题。

我想这会让你再次添加拖放,如果内置列表是只读的那么你怎么能把删除的文件放到列表中呢?

:))


可能有更优雅的方式来做到这一点,但这是我的解决方案。 随着Jquery

fileEle.value = "";
var parEle = $(fileEle).parent();
var newEle = $(fileEle).clone()
$(fileEle).remove();
parEle.append(newEle);

基本上你搞定了输入的值。 克隆它并将克隆放在旧克隆的位置。


我找到了非常快速和简短的解决方法。 在许多流行的浏览器(Chrome,Firefox,Safari)中测试过;

首先,您必须将FileList转换为Array

var newFileList = Array.from(event.target.files);

删除特定元素使用此

newFileList.splice(index,1);

这个问题已经得到了回答,但我想分享一些可能有助于其他人使用FileList的信息。

将FileList视为数组会很方便,但sort,shift,pop和slice等方法不起作用。 正如其他人所建议的那样,您可以将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 +中测试OK






javascript html5 drag-and-drop filelist