使用 jquery fileupload basic 以编程方式删除文件 [英] Delete files programmatically with jquery fileupload basic

问题描述

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

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.

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

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.

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

How do I programmatically remove files from the upload queue?

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:

And the file upload 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();
    });              
});

推荐答案

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

I solved this. Here is the solution with description:

我在修改了一些之后找到了我的解决方案.关键是要记住我正在回电.因此，在删除功能的事件处理程序中，我只是将 data.files 数组清零，在该处理程序的提交中，我仅在 files 数组的长度大于 0 时提交.我清理了事件处理程序函数，所以眼睛更容易.HTML 没有改变.

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.

新的 JavaScript 处理代码:

New JavaScript handling code:

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

这篇关于使用 jquery fileupload basic 以编程方式删除文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！