多个文件上传问题

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();
}

我有一个问题。当我尝试删除该文件时，它会被删除，但它被存储在后端，splice无法正常工作。

感谢您的帮助。

Answer 1

我发现这个plugin几乎可以解决我在这里提出的问题陈述。如果完成一个improvement将完全匹配作为我的问题陈述的解决方案。