HTML5 文件 API，按顺序包含多个文件，而不是一次全部文件

Question

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

当他们同时选择多个文件时，这有效，但我希望具有允许他们选择 1 个文件的功能，然后再次单击输入并添加到原始 FileList 对象（如果可能）。

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

我愿意接受任何和所有建议

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

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

Answer 1

来自

HTMLInputElement 的 FileList 对象（它是将保存 filesin input.files 的基础对象）只能修改以完全清除它（使用 input.value = null ）。

现在有一些方法可以实际规避这一点，由DataTransfer构造函数引入，但截至今天，只有Chrome和最新的Firefox支持这个构造函数。

因此，在这种情况下，最简单的方法是不依赖默认UI，而是将所有文件移动到常规数组中，以便您可以根据需要进行编辑。

这是一种混乱的方法，但它可能会给你一个很好的起点：
它确实会向您的输入添加一个数组，该数组将添加的文件保存在内存中。

// 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 来访问这些文件。