将 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);
网络上有很多克隆(最好是深度克隆)功能。
【讨论】:
fileEls
是 input
元素的数组。 event.dataTransfer.files.item(i)
产生 File
类型。 fileEls[i].files
是 FileList
,因此用 File
替换它没有意义(来自 event.dataTransfer.files.item(i)
)以上是关于将 FileList 拆分为单独的文件输入元素的主要内容,如果未能解决你的问题,请参考以下文章