使用 jquery fileupload basic 以编程方式删除文件

我使用blueimp文件上传插件（基础版）来实现多文件上传。我正在尝试实现允许用户删除排队上传文件的功能。我无法弄清楚如何正确访问文件数组。每次add回调中，索引为0，文件数组长度为1（仅包含用户点击删除的文件）。我正在为排队到 div 的每个文件添加一个链接，该链接是可单击的，并且如果单击则应删除该文件。

我的想法是只创建一个带有文件索引的删除链接并将其从数组中删除，但由于上述问题，索引永远不正确。我也尝试过按文件名，但“on”回调中的文件名始终是选择上传的第一个文件 - 我必须弄清楚一些闭包范围。

如何以编程方式从上传队列中删除文件？

HTML:

<div id="fileBrowserWrapper">
    <form id="myForm" action="#" method="post" enctype="multipart/form-data">
        <input id="uploadDocBrowse" type="file" name="files[]" multiple/>                                                    
    </form>
</div>
<div id="inputFilesBox"></div>
<div id="uploadFilesBox"></div>

文件上传 JavaScript：

$('#myForm').fileupload({
    url: "/SomeHandler",
    dataType: 'html',
    autoUpload: false,
    singleFileUploads: false,
    replaceFileInput: false,
    add: function (e, data) {
        console.log("Number of files: " + data.files.length);

        $.each(data.files, function (index, file) {                                       
            $('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>")
            .on('click', { filename: file.name, files: data.files }, function(event) {                            
                var uploadFilesBox = $("#uploadFilesBox");
                var remDiv = $("#fileDiv_" + event.data.filename);
                remDiv.remove();
                event.data.files.splice(0, 1);                              
            }
        });
    });

    data.context = $('#myButton')
    .click(function () {
        data.submit();
    });              
});

我解决了这个问题。这是带有描述的解决方案：

经过更多修改后，我找到了解决方案。关键是要记住我正在回电。因此，在删除功能的事件处理程序中，我只是将 data.files 数组归零，并且在该处理程序的提交中，仅当文件数组的长度大于 0 时才提交。我清理了事件处理程序函数，以便对眼睛来说更容易。 HTML 不变。

新的 JavaScript 处理代码：

 $('#myForm').fileupload({
            url: "/SomeUrl",
            dataType: 'html',            
            add: function (e, data) {
                $.each(data.files, function (index, file) {
                    var newFileDiv = $("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>");
                    $('#uploadFilesBox').append(newFileDiv);

                    newFileDiv.find('a').on('click', { filename: file.name, files: data.files }, function (event) {                        
                        event.preventDefault();
                        var uploadFilesBox = $("#uploadFilesBox");
                        var remDiv = $(document.getElementById("fileDiv_" + event.data.filename));
                        remDiv.remove();                        
                        data.files.length = 0;    //zero out the files array                                     
                    });

                    data.context = newFileDiv;
                });

                $('#myButton')
                    .click(function () {
                        if (data.files.length > 0) {     //only submit if we have something to upload
                            data.submit();
                        }                                                    
                    });
            }
});