javascript - 是否可以更新 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 仅包含来自最后一次选择操作的项目，因此我需要使用列表更新 f.files FileList 我积累的项目:

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

但是第二行给出:

Uncaught TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

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

附带问题:我认为 Javascript 使用动态类型。为什么这里会报错类型？

Answer 1

您不能修改文件列表，但您可以使用 DataTransfer 对象创建一个新文件列表，如果您愿意，可以将数据复制到其中以创建一个包含您要进行的特定更改的副本。

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

let myFileList = list.files;

然后您可以将其设置为 DOM 节点的文件属性:

fileInput.files = myFileList;

如果您愿意，您可以遍历旧的 FileList，将文件复制到新的。