如何从单个输入获取多个文件输入 [英] how to get multiple file input from a single input

问题描述

我有一个输入文件元素.

I have an input file element.

<input type='file' id='tempFileInput' multiple></input>

假设我为上述文件输入框('tempFileInput')选择了三个文件；

Let say I have selected three files for the above file input box ('tempFileInput');

OnChange我想将三个文件分成每个文件的三个新文件输入框.即

OnChange I want to separate three files into three new file input boxes for each file. i.e

<input type='file' id='inputFile_0'></input> 
<input type='file' id='inputFile_1'></input> 
<input type='file' id='inputFile_2'></input>

我正在努力实现这一目标.有帮助吗?

I'm struggling to achieve this. Any help?

///我已经写了一段关于我想要实现的目标的JavaScript小片段.

//I have written a small JavaScript snippet towards what I wana achieve.

var index = 0;
function multipleInputBoxes(tempFileInput){
   var divForm = document.getElementById('divForm');
   var numOfFiles = tempFileInput.files.length;

   for(var i=0; i<numOfFiles; i++){
      var newUploader = document.createElement('input');
      newUploader.type='file';
      newUploader.id = 'inputFile_' + index;

      var file = tempFileInput.files[i];
      ***newUploader.files[0] = file;***
      //above line does not work, as by default due to security reasons input type='file' is read only, and non editable.

      divForm.appendChild(newUploader);
      index++;
   }
}

推荐答案

所以我很难访问单个文件输入形式的文件( s )并将它们分别保存在每种形式中.因为可以访问每个文件 var file = tempFileInput.files[i] ，所以我创建了一个循环，并将每个文件保存在html'object'标记中，并将文件对象保存在object.value中.例如

So I was having difficulty accessing file(s) form single fileinput and separately saving them in each form. As I could access each file var file = tempFileInput.files[i], I created a loop and saved each file in a html 'object' tag and saved the file object in object.value. For e.g

var numOfFile = tempFileInput.files.length;
for (var int i=0; i<numOfFile; i++){
    //get file object from the filinput element
    var file = tempFileInput.files[i];

    //create new element
    var newObj = document.createElement('object');
        newObj.id = 'obj_' + i;
        newObj.value = file;

    //append object to new form
    createNewForm(newObj);
}

function createNewForm(newObj){
   ...do something here
   ...
   ...
   newForm.appendChild(newObj);
}

这篇关于如何从单个输入获取多个文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！