具有多个文件的HTML5文件API按顺序而不是一次完成 [英] HTML5 File API with Multiple Files in sequence instead of all at once

问题描述

我正在构建BackboneJS / Marionette应用程序，目前正在尝试允许用户上传多个文件。

I am building a BackboneJS/Marionette App and currently trying to allow users to upload multiple files.

当他们同时选择多个文件但我希望能够让他们选择1个文件然后再次点击输入并添加到如果可能的话，原始的FileList对象。

This works when they select multiple files at the same time but I would like to have the functionality to allow them to select 1 file and then click the input again and add to the original FileList Object if possible.

或者我想找到一种方法来允许我的保存功能在需要时从多个输入中获取文件。

Or I would like to find a way to allow my save function to grab the files from multiple inputs if need be.

我对所有建议持开放态度

I am open to any and all suggestions

这是我正在使用的HTML5文件API代码我正在使用 MDN HTML5文件API指南提供的jquery / js

This is the HTML5 File API code I am using and I am using the jquery/js offered by the MDN HTML5 File API guide

<input id="uploads" name="uploads" type="file" class="file uploads file1" multiple style="display: none"/>
<a href="#" id="fileSelect">Select File 1</a><br>

推荐答案

这是一种凌乱的方式，但它可能会给你一个很好的起点：

它会在你的输入中添加一个数组，它会在内存中保存添加的文件。

Here is one messy way, but it may give you a good starting point :
It does add an array to your input that will keep in memory the files added.

// The multiUp function will be called each time our hidden input is changed
document.querySelector('input').addEventListener('change', multiUp, false);

function multiUp(e){
  // if it's the first time we call it
  if(!this.multiFiles){
    // create the array that will keep our files in memory
    this.multiFiles = [];
    // add a pointer to the span where we'll display the file names
    this.__fileHolder = document.querySelector('#fileHolder');
    }
  // each time : empty the fileHolder span
  this.__fileHolder.innerHTML = '';
  var i;
  // add the new files to our array
  for(i = 0; i<this.files.length; i++){
    this.multiFiles.push(this.files[i]);
    }

  for(i = 0; i<this.multiFiles.length; i++){
    // display every file name to our fileHolder
    this.__fileHolder.appendChild(document.createTextNode(this.multiFiles[i].name) );
    // add a button to remove the file from the list
    addDeleteBtn(i, this);
    }
  }

// Tell the add span to act as a trigger to our input
document.querySelector('#add').addEventListener('click', function(){ document.querySelector('input').click()}, false);

function addDeleteBtn(f, input){
  // create the element
  var del= document.createElement('span');
  del.innerHTML = ' (x) ';
  del.className = 'deleteBtn';
  del.title = 'remove this file';
  // add an onclick event
  del.addEventListener('click', function(){
    // update the array
    input.multiFiles.splice(f, 1);
    // update the fileHodler
    input.__fileHolder.innerHTML = '';
    var fileLength = input.multiFiles.length;
    if(fileLength>0){
      for(var i = 0; i<fileLength; i++){
        input.__fileHolder.appendChild(document.createTextNode(input.multiFiles[i].name) );
        addDeleteBtn(i, input);
        }
      }
    else input.__fileHolder.innerHTML = 'No files selected.';
    }, false);
  input.__fileHolder.appendChild(del);
  }

#add{ font-size: 2em; cursor: pointer;}
#fileHolder{ color: rgba(0,0,0,.7); max-width: 80%; font-size: 70%; overflow-x: auto; white-space: nowrap; display: inline-block;}
.deleteBtn{cursor: pointer; color: #000;}

<div class="multiUp">
<span id="add">+</span>
<span id="fileHolder">No files selected.</span>
<input multiple type="file" style="display: none"/>
</div>

您现在可以通过迭代 document.querySelector（'。multiUp> input'）来访问这些文件.multiFiles 。

这篇关于具有多个文件的HTML5文件API按顺序而不是一次完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！