如何在Javascript中使用FileList(来自<input type ="file">)？

Question

在这个W3schools示例中,console.log在input元素上显示了一个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);

Answer 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);

更多关于Function :: apply

更多关于Array :: push

Answer 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)
  }
})

Answer 3

数组可以很好地保存实例File，但FormData如果您想将它们上传到某个地方，则更好。如果您想注销或查看 FormData，Map可以选择将其转换为 a。请记住，这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));
}

请参阅此 JSBin。

Answer 4

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

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

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