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


Posted in Javascript onFebruary 08, 2017

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

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

1.首先我们要设置cancelmg属性,即设置文件上传成功后,显示在文件上的关闭图片.这里需要修改对应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; 
}

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

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

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

4.代码如下:

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 () { 
    //我的处理逻辑 
    //1.首先调用ajax 传递文件名到后台,后台删除对应的文件(这个我就不写了) 
    //2.从后台返回的为true,表明删除成功;返回false,表明删除失败 
     var deletefileid = 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) { 
 
  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,直接删除就好。

Javascript 相关文章推荐
javascript深入理解js闭包
Jul 03 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 #Javascript
用move.js库实现百叶窗特效
Feb 08 #Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 #Javascript
Move.js入门
Feb 08 #Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 #Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 #Javascript
简单实现bootstrap导航效果
Feb 07 #Javascript
You might like
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
如何使用Javascript中的this关键字
2020/05/28 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python中反射用法实例
2015/03/27 Python
Python实现将xml导入至excel
2015/11/20 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python理解递归的方法总结
2019/01/28 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
用 Python 制作地球仪的方法
2020/04/24 Python
Python过滤序列元素的方法
2020/07/31 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
查摆问题整改措施
2014/10/24 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
联谊活动总结范文
2015/05/09 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Nginx实现负载均衡的项目实践
2022/03/18 Servers