将 FileList 拆分为单独的文件输入元素

Question

是否有可能拆分一个 FileList 实例（从放置事件，event.dataTransfer.fileList），并将其中的每个文件分配给一个个体 <input type="file" ... />元素?

例如，要将放置事件中的所有文件（1 个或多个...）分配给输入元素 fileInputElement，您需要：

function dropHandler(event) {
  fileInputElement.files = event.dataTransfer.files;
}

我正在寻找类似的东西：

function dropHandler(event) {
  // assume fileEls is an array of input[type=file] elements
  for (var i = 0; i < event.dataTransfer.files.length; i++) {

    // yep, FileList.push doesn't exist..
    fileEls[i].files.push(event.dataTransfer.files.item(i));

    // and this (imagined) FileList constructor is not available...
    fileEls[i].files = new FileList([event.dataTransfer.files.item(i)]);
  }
}

一个迹象表明不，不能这样做...

Answer 1

如果 fileEls 已经是一个数组，试试

fileEls.push(event.dataTransfer.files.item(i));

你也可以这样做：

fileEls[i].files = 克隆(event.dataTransfer.files.item);

网上有很多克隆（最好是深度克隆）功能。

Answer 2

您可以通过 DataTransfer

创建一个新的 FileList

function dropHandler(event) {
  // assume fileEls is an array of input[type=file] elements
  for (var i = 0; i < event.dataTransfer.files.length; i++) {

    // Create a new DataTransfer
    var dataTransfer = new DataTransfer();

    // Add the items
    dataTransfer.items.add(event.dataTransfer.files.item(i));

    // Get the FileList
    fileEls[i].files = dataTransfer.files;

  }
}

将 FileList 拆分为单独的文件输入元素

Split FileList into individual file input elements

javascript

dom

filelist