首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5文件应用程序接口,支持多个文件顺序执行,而不是一次执行所有文件

HTML5文件应用程序接口,支持多个文件顺序执行,而不是一次执行所有文件
EN

Stack Overflow用户
提问于 2015-06-14 04:33:46
回答 1查看 1.4K关注 0票数 1

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

当他们同时选择多个文件时,这是可行的,但我希望有这样的功能,允许他们选择一个文件,然后再次单击输入,并添加到原始FileList对象,如果可能的话。

或者我想找到一种方法,如果需要的话,允许我的save函数从多个输入抓取文件。

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

这是我正在使用的jquery File API代码,并且我正在使用MDN HTML5 File API guide提供的jquery/js

代码语言:javascript
复制
<input id="uploads" name="uploads" type="file" class="file uploads file1" multiple style="display: none"/>
<a href="#" id="fileSelect">Select File 1</a><br>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-14 10:41:19

只能修改来自HTMLInputElement (将在input.files中保存文件的底层对象)中的FileList对象,以便完全清除它(使用input.value = null)。

DataTransfer constructor引入了There are now ways来解决这个问题,但是到目前为止,只有Chrome和最新的火狐浏览器支持这个构造函数。

因此,在这种情况下,最简单的方法是不依赖默认UI,而是将所有文件移动到传统的Array中,这样您就可以随心所欲地进行编辑。

这里有一种混乱的方法,但它可能会给你一个很好的起点:

它确实会向您的输入添加一个Array,该数组会将添加的文件保存在内存中。

代码语言:javascript
复制
// 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);
  }
代码语言:javascript
复制
#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;}
代码语言:javascript
复制
<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来访问这些文件。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30823275

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档