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

我正在使用blueimp文件上传插件（基本版本）来实现多文件上传。我正在尝试实现允许用户删除排队等待上载的文件的功能。我不知道如何正确地访问文件数组。每次在add回调中，索引为0，文件数组长度为1（它只包含用户单击要删除的文件）。我正在为队列中的每个文件添加一个链接到一个div，该div是可单击的，如果单击，应该会删除该文件

我的想法是用文件的索引创建一个remove链接并将其从数组中删除，但是由于上面提到的问题，索引永远都不正确。我也尝试过使用文件名，但是“on”回调中的文件名总是第一个被选择上传的文件-我必须弄清楚一些关闭范围

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

HTML:

以及文件上载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();
    });              
});

$（'#myForm'）。文件上载({
url:“/SomeHandler”，
数据类型：“html”，
自动上载：false，
singleFileUploads:false，
replaceFileInput:false，
添加：功能（e、数据）{
log（“文件数：+data.files.length”）；
$.each（data.files，函数（索引，文件）{
$（'#uploadFilesBox'）。追加（“+file.name+”）
.on（'click'，{filename:file.name，files:data.files}，函数（事件）{
var uploadFilesBox=$（“#uploadFilesBox”）；
var remDiv=$（“#fileDiv”+event.data.filename）；
remDiv.remove（）；
事件.数据.文件.拼接（0,1）；
}
});
});
data.context=$（“#我的按钮”）
。单击（函数（）{
data.submit（）；
});              
});

我解决了这个问题。以下是带说明的解决方案：

我在进一步修改后找到了解决办法。关键是要记住我在回电话。因此，在remove功能的事件处理程序中，我只是将data.files数组归零，在该处理程序的submit中，我仅在文件数组的长度大于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();
                        }                                                    
                    });
            }
});

$（'#myForm'）。文件上载({
url:“/SomeUrl”，
数据类型：“html”，
添加：功能（e、数据）{
$.each（data.files，函数（索引，文件）{
var newFileDiv=$（“”+file.name+“”）；
$（'#uploadFilesBox'）.append（newFileDiv）；
newFileDiv.find（'a'）。在（'click'）上，{filename:file.name，files:data.files}，函数（事件）{
event.preventDefault（）；
var uploadFilesBox=$（“#uploadFilesBox”）；
var remDiv=$（document.getElementById（“fileDiv_216;”+event.data.filename））；
remDiv.remove（）；
data.files.length=0；//将文件数组归零
});
data.context=newFileDiv；
});
$（“#我的按钮”）
。单击（函数（）{
如果（data.files.length>0）{//只有当我们有东西要上传时才提交
data.submit（）；
}                                                    
});
}
});
< /代码> 
 <强>为多个文件< /强>的工作-它检查所有文件，当文件错误时，所有文件都不中断（如<代码> .SPLICE（）/代码>或<代码> .LIGHT＝0 < /COD> DO）。strong>想法是：进行验证->如果出现错误：在所有文件之后/上传之前标记有错误的文件索引->：通过
$.grep（）删除/删除错误的索引/文件。
一起上传好的文件
单文件上传：false

$(this).fileupload({
        // ...
        singleFileUploads: false,   // << send all together, not single
        // ...
        add: function (e, data) {

            // array with all indexes of files with errors
            var error_uploads_indexes = [];

            // when add file - each file
            $.each(data.files, function(index, file) {

                // array for all errors - in example is only one: size
                var uploadErrors = [];

                // ... validation

                        // check size
                        if(data.files[index]['size'] > 1048576) {
                            uploadErrors.push('Filesize is too big');
                        };
                // ...

                // when errors
                if(uploadErrors.length > 0) {

                    // mark index of error file
                    error_uploads_indexes.push(index);
                    // alert error
                    alert(uploadErrors.join("\n"));

                };

            }); // << each


            // remove indexes (files) with error
            data.files = $.grep( data.files, function( n, i ) {
                return $.inArray(i, error_uploads_indexes) ==-1;
            });


            // if are files to upload
            if(data.files.length){
                // upload by ajax
                var jqXHR = data.submit().done(function (result, textStatus, jqXHR) {
                        //...
                     alert('done!') ;
                        // ...
                });
            } // 

        },
        // ...
    }); // << file_upload

$（此）.fileupload({
// ...
singleFileUploads:false，//1048576）{
uploadErrors.push（'文件大小太大'）；
};
// ...
//出错时
如果（uploadErrors.length>0）{
//标记错误文件的索引
错误\上传\索引。推送（索引）；
//警报错误
警报（上传错误。加入（“\n”）；
};
}); //  谢谢你的“Furynation”

我所做的与你的方法相似。对于我选择的每个文件，我都会向表中添加一行（预上传提交）。我将此行分配给data.context以供以后使用

见：

我的代码段位于添加回调处理程序中：

 $("#upload").click(function () {
                 if (data.files.length > 0) { 
                     data.submit();
                 }
            });
            data.context.find('a').on('click',function (event) {  
                event.preventDefault();
                data.context.remove();   
                data.files.length = 0;   
            });

这将删除表行并重置数组

如果有更干净的方法，请告诉我
 我解决了这个问题，请看我原始问题的顶部。请将您的解决方案作为答案发布。这是未来读者将寻找解决方案的地方。把它包括在问题中看起来很混乱。谢谢！：）我得等8个小时才能回答我自己的问题：）说得对。我通常不这么做，但现在是假期，我想施展一些员工的魔法。我把答案贴了出来，并把它归因于你。如果我抓住了文章的错误部分或其他内容，请随意编辑。：）
 $("#upload").click(function () {
                 if (data.files.length > 0) { 
                     data.submit();
                 }
            });
            data.context.find('a').on('click',function (event) {  
                event.preventDefault();
                data.context.remove();   
                data.files.length = 0;   
            });