依次具有多个文件的HTML5 File API，而不是一次全部

Question

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

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

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

我愿意接受任何建议

这是我正在使用的HTML5 File API代码，我正在使用MDN HTML5 File 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对象（该基本对象将在您的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访问这些文件。