我正在构建一个BackboneJS/Marionette应用程序,目前正在尝试允许用户上传多个文件。
当他们同时选择多个文件时,这是可行的,但我希望有这样的功能,允许他们选择一个文件,然后再次单击输入,并添加到原始FileList对象,如果可能的话。
或者我想找到一种方法,如果需要的话,允许我的save函数从多个输入抓取文件。
我愿意接受任何和所有的建议
这是我正在使用的jquery File 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>
发布于 2015-06-14 10:41:19
只能修改来自HTMLInputElement (将在input.files中保存文件的底层对象)中的FileList对象,以便完全清除它(使用input.value = null
)。
DataTransfer constructor引入了There are now ways来解决这个问题,但是到目前为止,只有Chrome和最新的火狐浏览器支持这个构造函数。
因此,在这种情况下,最简单的方法是不依赖默认UI,而是将所有文件移动到传统的Array中,这样您就可以随心所欲地进行编辑。
这里有一种混乱的方法,但它可能会给你一个很好的起点:
它确实会向您的输入添加一个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
来访问这些文件。
https://stackoverflow.com/questions/30823275
复制相似问题