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中window、doucment、body的解释
Aug 14 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
台湾旅游网站:灿星旅游
2018/10/11 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
运动会通讯稿500字
2014/02/20 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
七年级数学教学反思
2016/02/17 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android