使用jquery fileupload基础版进行程序化文件删除

Question

我正在使用blueimp文件上传插件（基础版）实现多文件上传。 我尝试实现允许用户删除待上传文件的功能。 我无法正确访问文件数组。 每次在添加回调中，索引为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();
    });              
});

- Furynation

---

我解决了这个问题，请查看我的原始问题顶部。 - Furynation

请将您的解决方案发布为答案。未来的读者将在那里寻找解决方案。将其包含在问题中通常只会让人感到困惑。谢谢！ :) - Adam Lear

我必须等待8个小时才能回答自己的问题 :) - Furynation

说得好。我通常不这样做，但现在是假期，我觉得可以施展一些员工魔力。我发布了答案并将其归功于你。如果我选择了错误的部分或其他问题，请随意进行编辑。 :) - Adam Lear

Answer 1

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

在进一步尝试后，我找到了解决方案。关键是要记住我处于回调函数中。所以在删除功能的事件处理程序中，我只需将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();
                        }                                                    
                    });
            }
});

- Furynation

Answer 2

感谢@Furynation提供的帮助。

我的做法与你类似。对于我选择的每个文件，我都会向表格中添加一行（上传前提交）。我将这一行分配给data.context以便稍后使用。

See: https://github.com/blueimp/jQuery-File-Upload/issues/3083

我的代码片段在添加回调处理程序中：

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

这将删除表格行并重置数组。

如果有更简洁的方法，请告诉我。

- shane lee

Answer 3

适用于多个文件 - 它检查所有文件，并且当出现错误文件时不会中断（例如.splice()或.lenght=0）。想法是：进行验证->如果出现错误：标记带有错误的文件的索引->在上传所有文件/之前：通过$.grep()删除错误的索引/文件->一起上传好的文件singleFileUploads: 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

- Laguna Web Design