How can I avoid <input file> deletes values after selecting files?

前端 未结 2 1043
独厮守ぢ
独厮守ぢ 2021-01-26 01:34

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:

When I choose files with

相关标签:
2条回答
  • 2021-01-26 01:45

    As workaround you can insert another input after file choose and hide original one.

    0 讨论(0)
  • 2021-01-26 01:53

    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);
    });
    
    0 讨论(0)
提交回复
热议问题