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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
javascript数组详解
Oct 22 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
js动态获取时间的方法分析
Aug 02 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
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python Lambda函数使用总结详解
2019/12/11 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
仓库管理专业个人的自我评价
2013/12/30 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
股份合作协议书
2014/04/12 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
售房协议书
2014/08/19 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
简易版租房协议书范本
2014/10/13 职场文书
校长师德表现自我评价
2015/03/05 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2015年司法局工作总结
2015/05/22 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript