jquery uploadify How to Cancel Uploaded Successful Files

How to use uploadify file upload, you can find on the Internet, but need to pay attention to the version number. I just say 1, after the file has been successfully uploaded to the server, how to cancel the file upload.

I use automatic upload, that is, set the 'auto' property to true.

1. First we need to set the cancelmg attribute, that is, set the closed picture displayed on the file after the file is uploaded successfully. 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; 
} 

The address of uploadify-cancel. png in url is set correctly. At this time, you can see the uploaded file and display the corresponding cancellation picture. Of course, we don't modify the source code, and the picture can be placed under img folder.

2. When we use automatic upload and click Close on the file correspondence, the 'onCancel' event will not be triggered. (onCancel event is triggered when it is not automatically uploaded), so we need to bind the corresponding event to the cancellation picture.

3. When each image is uploaded successfully, the "onUploadSuccess" event will be triggered. So we write the binding operation in the onUploadSuccess 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  Pass the file name to the background , Delete the corresponding file in the background ( I won't write this ) 
    //2. Returned from the background is true, Indicates successful deletion ; Return false, Indicates that the deletion failed  
     var deletefileid = cancel.attr("deletefileid"); 
     $("#uploadify").uploadify("cancel",deletefileid);// Delete files from the upload queue . 
  }); 
} 
} 

5. $("# uploadify"). uploadify ("cancel", deletefileid); This calls the cancel method in uploadify, However, there is one problem in cancel method, By looking at the source code, It was found that the cancel method did not delete the files in the queue, Just deleted the corresponding div in the foreground. This will lead to, assuming that when I upload the file A, it has been uploaded successfully, then I click Delete Picture to cancel the upload of the file A, then the foreground A file disappears, but if I upload the file A again, it will prompt me that I have uploaded the file A, which is obviously problematic.
In fact, the cancel method of uploadify is aimed at files that have not been uploaded to the server. Click Cancel at this time to call the cancel method, that is, the cancel method is aimed at files that have not been uploaded to the server.

At this time, we need to modify the source code to delete the 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; 
          /*  End of Adding  */ 
          $('#' + 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(); 
      }); 
    } 
  }); 
 
}, 

Summarize

The above is my method for how to cancel the files that have been uploaded successfully. Of course, if it is not uploaded automatically, then you don't need to modify uploadify, just delete it directly.