我怎样才能避免<输入文件>选择文件后删除值？ [英] How can I avoid <input file> deletes values after selecting files?

问题描述

我正在开发一个网络上传器，然而，我找到了一些东西，我不知道这是不是一个问题。这是我发现的：

I'm working on a web uploader, however, I found something, I do not know if it's a problem. This is what I found:

当我选择< input type =filemultiple> 的文件时，所有选定文件的值都存储在INPUT中的文件列表中。但是，当我添加更多文件时，我选择的文件将替换之前选择的文件。我认为这是此元素DOM的默认行为。

When I choose files with <input type="file" multiple>, the values ​​of all selected files are stored in a list of files which is within the INPUT. However, when I add more files, the files that I select replace those I selected previously. I think this is a default behavior of this element DOM.

如果我想添加更多文件而不删除之前选择的文件，我该怎么办？

有谁知道怎么做？

顺便说一句：抱歉我的英文不好，这是不是我的母语。谢谢。

Btw: Sorry for my bad english, It's not my mother language.Thanks.

推荐答案

你可以跟踪所有 FileList s，并在通过ajax发送时遍历每个： http://jsfiddle.net/46Pk8/ 。但是，请记住，您可以通过这种方式多次选择（和上传）文件。一个更好的方法是拥有一个可视列表，让用户能够在列表中添加/删除文件。

You can keep track of all FileLists, 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);
});

这篇关于我怎样才能避免<输入文件>选择文件后删除值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！