如何在 Javascript 中使用 FileList（来自 <input type="file">）？答案

【问题标题】：How to work with FileList (from <input type="file">) in Javascript?如何在 Javascript 中使用 FileList（来自 <input type="file">）？
【发布时间】：2021-08-25 00:36:32
【问题描述】：

在this W3schools example，console.log 的输入元素上显示了一个 FileInput 对象：

FileList {0: File, 1: File, length: 2}

我该如何处理？该示例演示了访问文件，但每次用户选择新文件时，旧文件都会消失。如何创建一个新的空 FileList 并将其复制过来，以便用户可以向 FileList 添加更多文件？

我试过了，但它会生成两个 FileList 对象，而不是一个包含所有文件的 FileList：

var fileStore = x.files;

function myFunction(){
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            fileStore += x.files;
            console.log(x.files);
            console.log(fileStore);

【问题讨论】：

FileList 的长度是只读的，所以我猜它不能被变异：developer.mozilla.org/en-US/docs/Web/API/FileList
啊好吧，那我想问一下，如何将这些文件添加到另一个变量中？

标签： javascript html

【解决方案1】：

未经测试，但这应该可以工作

var fileStore = [];

function myFunction(){
    var txt = "";
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Select one or more files.";
        } else {
            fileStore.push.apply(fileStore,x.files);
            console.log(x.files);
            console.log(fileStore);

More on Array::push

【讨论】：

这成功了！感谢您的文档。我必须等待 6 分钟才能让我接受答案。
最佳和最简单的解决方案。

【解决方案2】：

无法将File 对象添加到FileList。您可以使用FormData 将Files 附加到单个对象。

var data = new FormData();
document.querySelector("input[type=file]")
.addEventListener("change", function(event) {
  for (var i = 0, files = event.target.files; i < files.length; i++) {
    data.append("file-" + [...data.keys()].length, files[i], files[i].name)
  }
})

【讨论】：

@DavidTan 另见stackoverflow.com/questions/29841147/…
谢谢。这稍微复杂一些，但最终证明比列表更有用，因为 FormData 具有删除等方法。
@DavidTan Array.prototype.splice() 可以在数组中添加或删除项目

【解决方案3】：

数组可以保存File 实例，但如果您想将它们上传到某个地方，FormData 会更好。如果您想注销或查看 FormData，可以选择将其转换为 Map。请记住，FormData 是可迭代的。

var formData = new FormData();
var index = 0;

function onDrop(event)
{
  var dt = event.dataTransfer;
  var files = dt.files;

  var count = files.length;
  output("File Count: " + count + "\n");

  for (var i = 0; i < files.length; i++) {    
    formData.append(files[i].name, files[i]);
  }
}

function output(text)
{
  document.getElementById("output").textContent += text;
  console.dir(new Map(formData));
}

See this JSBin.

【讨论】：

谢谢，非常感谢 JSBin。一个答案已经被接受，但这个答案对于像我这样制作 javascript 文件上传器的人来说更有用。

【解决方案4】：

可以使用数据传输类添加文件

export const makeFileList = files => {
  const reducer = (dataTransfer, file) => {
    dataTransfer.items.add(file);
    return dataTransfer;
  }

  return files.reduce(reducer, new DataTransfer()).files;
}

【讨论】：