一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:17:04 编辑:袖梨 来源:一聚教程网

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

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

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

 

 代码如下复制代码

.uploadify-queue-item .cancel a {

  background:url('../img/uploadify-cancel.png')00no-repeat;

  float:right;

  height:16px;

  text-indent:-9999px;

  width:16px;

}

 

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

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

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

4.代码如下:

 

 代码如下复制代码

onUploadSuccess:function(file, data, response) {

    varcancel=$('#fileQueue .uploadify-queue-item[id="'+ file.Id +'"]').find(".cancel a");

if(cancel) {

  cancel.attr("deletefileid",file.id);

  cancel.click(function() {

    //我的处理逻辑

    //1.首先调用ajax 传递文件名到后台,后台删除对应的文件(这个我就不写了)

    //2.从后台返回的为true,表明删除成功;返回false,表明删除失败

     vardeletefileid = cancel.attr("deletefileid");

     $("#uploadify").uploadify("cancel",deletefileid);//将上传队列中的文件删除.

  });

}

}

 

5.$("#uploadify").uploadify("cancel",deletefileid);这会调用uploadify中的cancel方法,但是cancel方法中有一个问题,通过查看源码,发现cancel方法并没有将队列中的文件删除,只是在前台删除了对应的div.这样就会导致,假设当我上传文件A,已经上传成功,这时我点击删除图片,取消文件A的上传,这时前台A文件消失,但是假如我再次上传文件A,会提示我已经上传过文件A了,这显然是有问题的.
其实,uploadify的cancel方法就是针对还没有上传到服务器的文件,这时点击取消,调用cancel方法,即cancel方法针对的是还没有上传到服务器的文件.

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

 

 代码如下复制代码

cancel :function(fileID, supressEvent) {

  

  varargs = 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] =='*') {

        varqueueItemCount = 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(varn = 0; n < args.length; n++) {

          swfuploadify.cancelUpload(args[n]);

          /* 添加代码 */

          deleteswfuploadify.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{

      varitem = $('#'+ 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();

      });

    }

  });

  

},

 

热门栏目