如何从单个输入中获取多个文件输入

Posted 2023-05-08

【中文标题】如何从单个输入中获取多个文件输入

【英文标题】：how to get multiple file input from a single input

【发布时间】：2012-06-14 23:52:27

【问题描述】：

使用浏览器 firefox 和 chrome

我有一个输入文件元素。

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

假设我为上面的文件输入框（'tempFileInput'）选择了三个文件；

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

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

我正在努力实现这一目标。有什么帮助吗？

//我写了一个小的 javascript sn-p 来实现我想要实现的目标。

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++;
   

【问题讨论】：

你想实现多选表单提交吗？否则我没有得到你的问题。

无法设置文件输入的值。我想也许有一种方法可以克隆输入并删除除一个项目之外的所有项目，但是，you cannot modify the FileList of a file input，要么 - 只需完全清除它。因此，您的问题没有解决方案。

@subirkumarsao 不。当用户从 fileInputBox 中选择三个文件时。我想将每个文件与该 fileInputBox 分开，并在不同的表单上创建三个新的文件输入框。因为用户在每个表单上都以不同的方式对待每个文件。

@OverZealous - 我绝对同意，这就是我在这个论坛上发布这个问题的原因。只是想指出我可以从 filInputBox 'var file = tempFileInput.files[i];' 访问每个文件，所以有没有办法可以将这个 'file' 变量分配给任何 html 元素并在表单获取时发布它提交。谢谢

【参考方案1】：

在其他帖子中找到分散的代码并组装了一个工作示例，该示例将输入文件“多个”文件分解为单个文件，并允许您删除它们或添加新文件而不会丢失先前选择的文件：

JS代码

// Requires jQuery

function addFileToNewInput(file, newInput) 
  if (!newInput)  return 

  var dataTransfer = new DataTransfer()
  dataTransfer.items.add(file)
  newInput.files = dataTransfer.files


function addFileNameToPreview(file, preview) 
  if (!preview)  return 

  preview.innerText = file.name


function breakIntoSeparateFiles(input, targetSelector, templateSelector) 
  var $input = $(input)
  var templateHtml = $(templateSelector).html()

  if (!input.files)  return 

  for(var file of input.files) 
    var $newFile = $(templateHtml).appendTo(targetSelector)
    addFileToNewInput(file, $newFile.find("input")[0])
    addFileNameToPreview(file, $newFile.find(".file-name")[0])
  

  $input.val([])

HTML

<!-- Requires bootstrap css for style -->

<form class="m-5">
  <div id="file-list"></div>

  <label for="upload_input" class="btn btn-warning">Upload</label>
  <input
    id="upload_input"
    type="file"
    name="post[attachments][]"
    class="d-none"
    multiple="multiple"
    onchange="window.breakIntoSeparateFiles(this, '#file-list', '#file-preview')"
  />

  <template id="file-preview">
    <div class="file-preview mb-2">
      <span class="file-name"></span>
      <button
        class="btn btn-sm btn-danger ml-2"
        onclick="$(this).closest('.file-preview').remove()"
       >&times;</button>

      <input class="d-none" multiple="multiple" type="file" name="post[attachments][]">
    </div>
  </template>
</form>

我写了一篇关于此的文章，其中有更多示例：https://medium.com/@goncalvesjoao/break-input-file-into-individual-files-and-preview-them-29fdbab925b2

【讨论】：

您的代码部分：var dataTransfer = new DataTransfer(); dataTransfer.items.add(file); newInput.files = dataTransfer.file; 帮助我的工作...谢谢

【参考方案2】：

如果您使用的是 HTML5，则可以使用一个 input 标签选择多个文件。不需要额外的。

使用下面的 HTML5：

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

更新：

没有办法做你想做的事。 files 属性仅出于某种原因而准备就绪。这是为了防止未经用户同意上传文件。如果它不是只读的，那么您可以编写脚本并从用户的计算机上传任何文件，这是一个巨大的安全问题。

【讨论】：

感谢您的回复。我可以选择多个文件我的目标是在我选择多个文件后用自己的文件输入框将它们分成单独的文件

【参考方案3】：

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

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);