uploadify cancels file upload

Keywords: JQuery

uploadify uses

How to upload files using uploadify, you can find it on the Internet, but you need to pay attention to the version number. I just want to talk about how to cancel the upload after the file has been successfully uploaded to the server.
I use auto upload, which sets the'auto'property to true.
1. First, we need to set the cancelmg property, which is to set the closed image displayed on the file after the file upload is successful. Here, we need to modify the code in the corresponding CSS.
.uploadify-queue-item .cancel a {
    background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
    float: right;
    height: 16px;
    text-indent: -9999px;
    width: 16px;
}

Set the uploadify-cancel.png address in the url here correctly. Then you can see the uploaded file and display the corresponding cancel-close picture. Of course, we do not modify the source code, the picture can also be placed under the img folder.
2. When we use automatic upload and click on the closure of the corresponding file, the onCancel event will not trigger. (onCancel event is triggered when the upload is not automatic.) So we need to bind the corresponding event to the cancelled image.
3. When each image is uploaded successfully, the onUpload Success event will be triggered. So we write the binding operation in the onUpload Success function.
4. The code is as follows:
onUploadSuccess:function(file, data, response) {
        var cancel=$('#fileQueue .uploadify-queue-item[id="' + file.Id + '"]').find(".cancel a");
if (cancel) {
    cancel.attr("deletefileid",file.id);
   cancel.click(function () {
       //My Processing Logic
       //1. First, call ajax to pass the file name to the background, and delete the corresponding file in the background (I will not write this)
       //2. Returning true from the background indicates that the deletion was successful; returning false indicates that the deletion failed.
         var deletefileid = cancel.attr("deletefileid");
         $("#Uploadify "). uploadify (" cancel ", delete file id); // delete files in the upload queue.
   });
}
}
5. $(" uploadify"). uploadify ("cancel", delete file id). This calls cancel method in uploadify, but there is a problem in cancel method. By looking at the source code, we find that cancel method does not delete the file in the queue, but deletes the corresponding div in the foreground. This will lead to the assumption that when I upload file A, it has been uploaded successfully, I Click to delete the picture and cancel file A. Upload, the front desk A file disappears at this time, but if I upload file A again, I will remind you that I have uploaded file A, which is obviously problematic.

In fact, uploadify cancel method is for files that have not been uploaded to the server, then click cancel, call cancel method, that is, cancel method is for files that have not been uploaded to the server.

At this point, we need to modify the source code to delete the corresponding files in the queue.

        cancel : function(fileID, supressEvent) {

            var args = arguments;

            this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this        = $(this),
                    swfuploadify = $this.data('uploadify'),
                    settings     = swfuploadify.settings,
                    delay        = -1;

                if (args[0]) {
                    // Clear the queue
                    if (args[0] == '*') {
                        var queueItemCount = swfuploadify.queueData.queueLength;
                        $('#' + settings.queueID).find('.uploadify-queue-item').each(function() {
                            delay++;
                            if (args[1] === true) {
                                swfuploadify.cancelUpload($(this).attr('id'), false);
                            } else {
                                swfuploadify.cancelUpload($(this).attr('id'));
                            }
                            $(this).find('.data').removeClass('data').html(' - Cancelled');
                            $(this).find('.uploadify-progress-bar').remove();
                            $(this).delay(1000 + 100 * delay).fadeOut(500, function() {
                                $(this).remove();
                            });
                        });
                        swfuploadify.queueData.queueSize   = 0;
                        swfuploadify.queueData.queueLength = 0;
                        // Trigger the onClearQueue event
                        if (settings.onClearQueue) settings.onClearQueue.call($this, queueItemCount);
                    } else {
                        for (var n = 0; n < args.length; n++) {
                            swfuploadify.cancelUpload(args[n]);
                            /* Add code */
                            delete swfuploadify.queueData.files[args[n]];
                            swfuploadify.queueData.queueLength = swfuploadify.queueData.queueLength - 1;
                            /* Add end */
                            $('#' + args[n]).find('.data').removeClass('data').html(' - Cancelled');
                            $('#' + args[n]).find('.uploadify-progress-bar').remove();
                            $('#' + args[n]).delay(1000 + 100 * n).fadeOut(500, function() {
                                $(this).remove();
                            });
                        }
                    }
                } else {
                    var item = $('#' + settings.queueID).find('.uploadify-queue-item').get(0);
                    $item = $(item);
                    swfuploadify.cancelUpload($item.attr('id'));
                    $item.find('.data').removeClass('data').html(' - Cancelled');
                    $item.find('.uploadify-progress-bar').remove();
                    $item.delay(1000).fadeOut(500, function() {
                        $(this).remove();
                    });
                }
            });

        },

summary

Above is my way to cancel uploaded files. Of course, if it's not automatic upload, then you don't need to modify uploadify, just delete it directly.



Posted by pjleonhardt on Sat, 23 Mar 2019 09:51:53 -0700