有可能更新FileList吗？

Question

我有：

<input type="file" id="f" name="f" onchange="c()" multiple />

每次用户选择一个文件时，我都会通过将f.files的每个元素推到一个数组中来构建所有选定文件的列表：

var Files = [];
function c() {
  for (var i=0;i<this.files.length;i++) {
    Files.push(this.files[i]);
  };
}

在表单提交时，f.files只包含上次select操作中的项，因此我需要用我积累的FileList项列表更新FileList：

const upload=document.getElementById("f");
upload.files = files;

但是第二行给出了：

Uncaught :未能在‘HTMLInputElement’上设置‘file’属性:提供的值不是'FileList‘类型。

我给它分配了一个数组，这令人不高兴。如何从前面收集的FileList元素列表中构造FileList对象？

附带问题:我认为Javascript使用动态类型。为什么它在这里抱怨错误的类型？

Answer 1

就像你说的

未能在“HTMLInputElement”上设置“file”属性:提供的值不是“FileList”类型。

您只能使用FileList实例来设置文件，不幸的是，FileList是不可构造的或可变的，但是有一种方法可以大致地获得一个文件。

​

/**
 * @params {File[]} files Array of files to add to the FileList
 * @return {FileList}
 */
function FileListItems (files) {
  var b = new ClipboardEvent("").clipboardData || new DataTransfer()
  for (var i = 0, len = files.length; i<len; i++) b.items.add(files[i])
  return b.files
}

var files = [
  new File(['content'], 'sample1.txt'),
  new File(['abc'], 'sample2.txt')
];


fileInput.files = new FileListItems(files)
console.log(fileInput.files)

<input type="file" id="fileInput" multiple />

​

执行此操作将触发更改事件，因此您可能希望打开和关闭更改事件侦听器。

Answer 2

您不能修改Filelist，但是可以使用DataTransfer对象创建一个新的文件，如果您愿意，您可以将数据复制到其中，以创建一个具有特定更改的副本。

let list = new DataTransfer();
let file = new File(["content"], "filename.jpg");
list.items.add(file);

let myFileList = list.files;

然后，可以将其设置为DOM节点的file属性：

fileInput.files = myFileList;

如果您愿意，可以在旧FileList上迭代，将文件复制到新的文件中。