我正在开发一个网络上传器,但是,我发现了一些东西,我不知道这是否是一个问题。这是我发现的:
当我选择带有 的文件时 <input type="file" multiple>
,所有选定文件的值都存储在 INPUT 内的文件列表中。但是,当我添加更多文件时,我选择的文件会替换我之前选择的文件。我认为这是这个元素 DOM 的默认行为。
如果我想添加更多文件而不删除之前选择的文件,我该怎么办?
有谁知道如何做到这一点?
顺便说一句:对不起我的英语不好,这不是我的母语。谢谢。
我正在开发一个网络上传器,但是,我发现了一些东西,我不知道这是否是一个问题。这是我发现的:
当我选择带有 的文件时 <input type="file" multiple>
,所有选定文件的值都存储在 INPUT 内的文件列表中。但是,当我添加更多文件时,我选择的文件会替换我之前选择的文件。我认为这是这个元素 DOM 的默认行为。
如果我想添加更多文件而不删除之前选择的文件,我该怎么办?
有谁知道如何做到这一点?
顺便说一句:对不起我的英语不好,这不是我的母语。谢谢。
You can keep track of all FileList
s, and loop over each one when sending through ajax: http://jsfiddle.net/46Pk8/. However, keep in mind that you can select (and upload) a file more than once this way. A better method would be to have a visual list, and let the user be able to add/remove files to/from the list.
var files = []; // this will contain FileLists
$("button:first").on("click", function(e) {
$("<input>").prop({
"type": "file",
"multiple": true
}).on("change", function(e) {
files.push(this.files);
}).trigger("click");
});
$("button:last").on("click", function(e) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/echo/html/", true);
var data = new FormData();
$.each(files, function() { // each FileList
$.each(this, function() { // each file inside this list
console.log("appending %s", this.name);
data.append("files", this);
});
});
xhr.onreadystatechange = function(e) {
if(xhr.readyState === 4) {
console.log("done");
}
};
xhr.send(data);
});
作为解决方法,您可以在文件选择后插入另一个 input
并隐藏原始文件。