Question

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

这可以在他们同时选择多个文件时起作用，但我希望能够让他们选择1个文件，然后再次单击输入并添加到原始的FileList对象中。

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

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

这是我正在使用的HTML5文件API代码，我正在使用MDN HTML5 File API guide提供的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 ）。

There are now ways引入了{p> DataTransfer constructor来实际规避此问题，但截至今天，只有Chrome和最新的Firefox支持此构造函数。

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

这是一种混乱的方式，但它可能会给你一个很好的起点：
它会在您的输入中添加一个Array，它将在内存中保留添加的文件。

// 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按顺序而不是一次完成

1 个答案: