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

Posted

技术标签:

【中文标题】将 FileList 拆分为单独的文件输入元素【英文标题】:Split FileList into individual file input elements 【发布时间】:2016-11-16 10:10:54 【问题描述】:

是否可以拆分 FileList 实例(来自放置事件 event.dataTransfer.fileList),并将其中的每个文件分配给 individual <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)]);
  

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

【问题讨论】:

【参考方案1】:

您可以通过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;

  

【讨论】:

【参考方案2】:

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

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

你也可以这样做:

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

网络上有很多克隆(最好是深度克隆)功能。

【讨论】:

fileElsinput 元素的数组。 event.dataTransfer.files.item(i) 产生 File 类型。 fileEls[i].filesFileList,因此用 File 替换它没有意义(来自 event.dataTransfer.files.item(i)

以上是关于将 FileList 拆分为单独的文件输入元素的主要内容,如果未能解决你的问题,请参考以下文章

将字符串拆分为标记并将标记分成两个单独的数组

将 graphql 解析器文件拆分为单独的文件

将 txt 文件作为数组导入 python 将两位数拆分为单独的值

如何拆分一列字符串,并从单独的元素创建行? [复制]

将 React 组件拆分为单独的文件

根据分隔符将一个文件拆分为多个文件