我创建了一个简单的文件字段:
<input type="file" name="pictures_array[]" multiple accept="image/*" id="page_pictures_array" />
以及一些用于列出文件的 HTML5 文件 API 代码:
$('.page-form #page_pictures_array').change(function(evt) {
var file, files, reader, _i, _len;
files = evt.target.files;
console.log(files);
$('#file-list').empty();
for (_i = 0, _len = files.length; _i < _len; _i++) {
file = files[_i];
reader = new window.FileReader;
reader.onload = (function(file) {
return function(e) {
var src;
src = e.target.result;
return $("<li>" + file.name + " - " + file.size + " bytes</li>").prepend($('<img/>', {
src: src,
"class": 'thumb'
})).appendTo($('#file-list'));
};
})(file);
reader.readAsDataURL(file);
}
});
(cf. here http://www.html5rocks.com/en/tutorials/file/dndfiles/)
但是,由于我预计我的用户确实非常愚蠢,因此我确信他们会选择一个文件,然后再次单击上传字段以选择下一个文件。然而,这份名单<input type="file">
每次都会使用新选择的图像进行重置。
我如何确保新文件已附加到<input>
的数组,这样我就不会被愤怒的用户评论淹没?
我也在寻找这个问题的答案,我认为其他人已经这样做了。
但是如果你看看 filelist W3 参考http://www.w3.org/TR/FileAPI/#dfn-filelist http://www.w3.org/TR/FileAPI/#dfn-filelist它说它是只读的......
Edit:现在代码很大,经过一些改进,使得复制/粘贴变得困难。但我开始创建一个保存所有 tmp 文件的变量。
var tmp_files = new Array();
然后,当我添加新文件时,我将文件推送到该数组,如下所示
tmp_files.push(file);
在所有插入/删除之后(我有另一个 var 来保存删除),当用户单击发送文件时,我有这段代码可以使表单数据包含我想要的文件
var data = new FormData(); var count = 0;
$.each(tmp_files, function(i, file){
if(del_files.indexOf(file.name)== -1){
data.append(count, file);
count++;
}
});
然后我只需通过 ajax 发送 var 数据并保存它们。
您可以使用 $data = $_FILES; 获取它们;
希望这对您有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)