如何从FileList中删除文件

Question

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

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

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

Answer 1

如果您只想删除几个选定的文件:您不能.您链接到的文件API工作草稿包含一个注释:

该HTMLInputElement接口[HTML5]有一个只读 FileList 属性,[...]
[重点煤矿]

阅读一些HTML 5工作草案,我遇到了Common input元素API.看来你可以通过将对象的属性设置为空字符串来删除整个文件列表,如:valueinput

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

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

Answer 2

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

Answer 3

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

let fileArray = Array.from(fileList);

然后很容易File像任何其他数组一样处理s数组.

Answer 4

由于 JavaScript FileList 是只读的，不能直接操作，

最佳方法

您必须遍历input.fileswhile 将其与index要删除的文件的进行比较。同时，您将使用new DataTransfer()设置一个新的文件列表，不包括要从文件列表中删除的文件。

通过这种方法，input.files自身的值发生了变化。

removeFileFromFileList(index) {
  const dt = new DataTransfer()
  const input = document.getElementById('files')
  const { files } = input
  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    if (index !== i) dt.items.add(file) // here you exclude the file. thus removing it.
    input.files = dt.files
  }
}

替代方法

另一种简单的方法是将 FileList 转换为数组，然后进行拼接。

但这种方法不会改变 input.files

const input = document.getElementById('files')
// as an array, u have more freedom to transform the file list using array functions.
const fileListArr = Array.from(input.files)
fileListArr.splice(index, 1) // here u remove the file
console.log(fileListArr)

Answer 5

由于我们处于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."));

Answer 6

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

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

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

删除特定元素使用此

newFileList.splice(index,1);

Answer 7

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

FileList对象中的属性不能删除，但至少在Firefox 上可以更改。我解决此问题的方法是向IsValid=true通过检查的文件和IsValid=false未通过检查的文件添加属性。

然后我遍历列表以确保仅将具有的属性IsValid=true添加到FormData中。