html file 多文件,具有多个文件的HTML5文件API按顺序而不是一次完成(HTML5 File API with Multiple Files in sequence instead of ...

具有多个文件的HTML5文件API按顺序而不是一次完成(HTML5 File API with Multiple Files in sequence instead of all at once)

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

这在他们同时选择多个文件时有效但我希望能够让他们选择1个文件，然后再次单击输入并添加到原始的FileList对象(如果可能)。

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

我愿意接受任何建议

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

Select File 1

I am building a BackboneJS/Marionette App and currently trying to allow users to upload multiple files.

This works when they select multiple files at the same time but I would like to have the functionality to allow them to select 1 file and then click the input again and add to the original FileList Object if possible.

Or I would like to find a way to allow my save function to grab the files from multiple inputs if need be.

I am open to any and all suggestions

This is the HTML5 File API code I am using and I am using the jquery/js offered by the MDN HTML5 File API guide

Select File 1

原文：https://stackoverflow.com/questions/30823275

更新时间：2019-10-04 08:13

最满意答案

这是一个混乱的方式，但它可能会给你一个很好的起点：

它会为您的输入添加一个数组，该数组将在内存中保留添加的文件。

// 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.multiFiles.push(this.files[i]);

}

for(i = 0; 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

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;}

+

No files selected.

您现在可以通过迭代document.querySelector('.multiUp>input').multiFiles来访问这些文件document.querySelector('.multiUp>input').multiFiles 。

A FileList object from an HTMLInputElement (which is the underlying object that will hold the Files in your input.files) can only be modified in order to clear it completely (with input.value = null).

There are now ways to actually circumvent this, introduced by the DataTransfer constructor, but as of today, only Chrome and latest Firefox do support this constructor.

So the easiest in this case, is to not rely on the default UI, and instead move all your Files to a conventional Array, that you will be able to edit as you wish.

Here is one messy way, but it may give you a good starting point :

It does add an Array to your input that will keep in memory the files added.

// 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.multiFiles.push(this.files[i]);

}

for(i = 0; 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

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;}

+

No files selected.

You may now access those files by iterating through document.querySelector('.multiUp>input').multiFiles.

相关问答

SecurityError可能是由于您的文件不在Web服务器上引起的。 一旦您的文件在Web服务器上，window.requestFileSystem()应该在Chrome中工作。 The SecurityError might be caused by your file not being on a web server. Once your file is on a web server, window.requestFileSystem() should work in Chrome.

您可以通过XMLHttpRequest下载远程文件，并将它们处理为Blob 。 然后将其上传到另一台服务器。 上传必须通过XMLHttpRequest 。 它依赖于浏览器的XHR Level 2的实现。该链接包含您将需要的代码片段： http://www.html5rocks.com/en/tutorials/file/xhr2/ 它有两个片段用于将远程文件下载为Blob并将Blob上传到服务器。 You can download remote files over XMLHttpRequest,

...

您的示例无法正常工作，因为您没有考虑到在所有列表项已被创建时xhr进度事件被触发。 然而，有很多方法可以让你的例子工作。 这个想法是让xhr知道它正在处理什么清单项目。 例如，使用这段代码(我没有检查它是否有效，这段代码的目的是描述这个想法)： var xhr = new XMLHttpRequest();

xhr.upload.li = li;

xhr.upload.addEventListener('progress', function(e) {

var percent = pars

...

你有一个闭包问题，使用this代替xhr来引用事件回调中的当前XMLHttpRequest对象; function(e){

showUploadedItem(file, this.id);

});

function(e) {

var done = e.position || e.loaded, total = e.totalSize || e.total;

$("#" + this.id).attr('value', Math.floor((e.loaded / e.to

...

好吧，我认为你的问题是由FileReader的load事件处理程序引起的，它将这些数据URL附加到表单，在表单提交给服务器后调用。 您可以解决此问题，并通过将这些项添加到Add链接的click处理程序中的表单来取消多余的images变量并submit事件处理程序。 您还可以利用此机会进行一些客户端验证，防止重复数据URL上传到服务器，甚至为所选图像添加预览/删除选项。 此外，您可以通过将附加到file输入的change处理程序替换其click处理程序来取消添加链接。 编辑(nfplee)： var

...

Firefox不支持通过File API编写文件，即使添加它也可能只能访问网页而不能扩展。 换句话说：是的，如果您绝对需要写入文件，那么您应该使用低级API。 您希望将数据存储在用户配置文件目录中(没有扩展目录，您的扩展名通常作为单个打包文件安装)。 像这样的东西应该可以写一个文件： var file = require("sdk/io/file");

var profilePath = require("sdk/system").pathFor("ProfD");

var filePath =

...

这是一个混乱的方式，但它可能会给你一个很好的起点： 它会为您的输入添加一个数组，该数组将在内存中保留添加的文件。 // 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 th

...

是的，如果它是铬！ 使用filesytem，您将能够做到这一点。 Yes, if it is chrome! Play with the filesytem you will be able to do that.

这很容易解决， 由于f是FileEntry，我不得不请求文件本身，因此将代码更改为： // img = variable with some img options.

var data = new FormData();

fileService.getFile(img.viewpath.split('/').pop()).then(function (f) {

// f = FileEntry

f.file(function(file){

data.append(i

...

HTML5(或任何其他标记语言)不会也不能更改任何服务器端规则或绕过任何带宽限制。 HTML5 (or any other mark-up language) won't and can't change any server-side rules or bypass any bandwidth restrictions.