jquery uploadify如何取消已上传成功文件

如何使用uploadify进行文件上传,各位都能够在网上找到,但是需要注意版本号.我这里仅仅说一下,在文件已经成功上传到服务器之后,如何取消文件的上传.

我使用的是自动上传，即将'auto'属性设置为true.

1.首先我们要设置cancelmg属性,即设置文件上传成功后,显示在文件上的关闭图片.这里需要修改对应CSS中的代码

将这里url中的uploadify-cancel.png的地址设置正确.这时可以看到上传的文件后会显示对应的取消关闭图片.当然我们不修改源码,将图片放置在img文件夹下也可以.

2.当我们使用自动上传,点击文件对应上的关闭,这时是不会触发'onCancel'事件的,(onCancel事件是针对不自动上传时进行触发的)所以我们需要需要绑定对应的事件到取消图片上.

3.当每个图片上传成功之后,都会触发”onUploadSuccess”事件.所以我们将绑定操作写在onUploadSuccess函数中.

4.代码如下:

5.

这时我们需要修改源码将对应需要删除的文件在队列中进行删除.

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]); 
      /* 添加代码 */ 
      delete swfuploadify.queueData.files[args[n]]; 
      swfuploadify.queueData.queueLength = swfuploadify.queueData.queueLength - 1; 
      /* 添加结束 */ 
      $('#' + 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(); 
  }); 
} 

});

},

总结

以上是我针对如何取消已经上传成功的文件的方法.当然如果不是自动上传，那么不用修改uploadify，直接删除就好。