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

时间:2016-07-13 17:27:37

标签: javascript dom filelist

是否可以拆分FileList实例(来自放置事件event.dataTransfer.fileList),并将其中的每个文件分配到个人 <input type="file" ... />元素?

例如,要将drop事件中的所有文件(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)]);
  }
}

有迹象表明不能,不能做到 ......

2 个答案:

答案 0 :(得分: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;

  }
}

答案 1 :(得分:0)

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

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

您也可以这样做:

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

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