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

Delete files programmatically with jquery fileupload basic

提问by Furynation

I'm using the blueimp file upload plugin (the basic version) to implement multifile upload. I am trying to implement functionality to allow the user to remove queued files for upload. I cannot figure out how to access the files array appropriately. Every time in the add callback, the index is 0 and the files array length is 1 (it only contains the file the user clicked to remove). I'm adding a link for each file queued to a div, which is clickable and should remove the file if clicked.

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

My thought was to just create a remove link with the index of the file and remove it from the array, but because of the problem stated above, the index is never correct. I've also tried by filename, but the filename in the "on" callback is always the first file which was selected for upload - some closure scoping I have to figure out.

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

How do I programmatically remove files from the upload queue?

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

HTML:

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>

And the file upload JavaScript:

和文件上传 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();
    });              
});

采纳答案by Furynation

I solved this. Here is the solution with description:

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

I found my solution after tinkering with it some more. The key was remembering that I was in a call back. So in the event handler for the remove functionality, I just zeroed out the data.files array, and in the submit for that handler, I only submit if the files array has a length greater than 0. I cleaned up the event handler function so it's easier on the eyes. HTML is unchanged.

我在修修补补之后找到了我的解决方案。关键是记住我正在回电。所以在删除功能的事件处理程序中，我只是将 data.files 数组清零，并且在该处理程序的提交中，我只在文件数组的长度大于 0 时提交。我清理了事件处理程序函数这对眼睛更容易。HTML 不变。

New JavaScript handling code:

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

回答by shane lee

Thanks for that @Furynation.

谢谢@Furynation。

What I did was similar to your approach. For every file I select I add a row to a table(pre upload submission). This row I assign to the data.context to use for later use.

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

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

请参阅：https: //github.com/blueimp/jQuery-File-Upload/issues/3083

My code snippet is in the add callback handler:

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

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

This removes the table row and resets the array.

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

If there is a cleaner way, please let me know.

如果有更干净的方法，请告诉我。

回答by Laguna Web Design

Works for me for multiple files- it checks all files and doesn't break when file with error is one in the middle of all files (like .splice()or .lenght=0do). Idea is:do validation ->if error: mark index of file with error ->after all files/before upload: remove/delete wrong indexes/files by $.grep()->upload good files together singleFileUploads: false.

适用于我的多个文件- 它检查所有文件，并且当有错误的文件位于所有文件的中间时不会中断（例如.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