多文件上传问题

Question

我正在尝试上传多个文件。我也实现了删除文件功能。

代码在这里http://jsfiddle.net/SantoshNII/ktLsb0md/6/

var selDiv = "";
var storedFiles = [];

$(document).ready(function() {
    $("#files").on("change", handleFileSelect);

    selDiv = $("#selectedFiles"); 
    $("#myForm").on("submit", handleForm);

    $("body").on("click", ".selFile", removeFile);
});

function handleFileSelect(e) {
    var files = e.target.files;
    var filesArr = Array.prototype.slice.call(files);
    filesArr.forEach(function(f) {          

        storedFiles.push(f);

        var reader = new FileReader();
        reader.onload = function (e) {
            var html = "<div><img src=\"" + e.target.result + "\" data-file='"+f.name+"' class='selFile' title='Click to remove'>" + f.name + "<br clear=\"left\"/></div>";
            selDiv.append(html);

        }
        reader.readAsDataURL(f); 
    });

}

function handleForm(e) {
    e.preventDefault();
    var data = new FormData();

    for(var i=0, len=storedFiles.length; i<len; i++) {
        data.append('files', storedFiles[i]);   
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'handler.cfm', true);

    xhr.onload = function(e) {
        if(this.status == 200) {
            console.log(e.currentTarget.responseText);  
            alert(e.currentTarget.responseText + ' items uploaded.');
        }
    }

    xhr.send(data);
}

function removeFile(e) {
    var file = $(this).data("file");
    for(var i=0;i<storedFiles.length;i++) {
        if(storedFiles[i].name === file) {
            alert(storedFiles[i]);
            storedFiles.splice(i,1);
            break;
        }
    }
    $(this).parent().remove();
}

我对此有疑问。当我尝试从 UI 中删除文件时，它正在被删除但存储在后端，splice 无法正常工作。

感谢您的帮助。

Answer 1

我发现这个 plugin works almost fine for the problem statement I have raised here. One improvement 如果完成，将完美匹配我的问题陈述的解决方案。

多文件上传问题

Multiple files upload issue

javascript

jquery

file-upload