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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 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重定向的三种方法分享
2012/02/22 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
举例讲解Python中的算数运算符的用法
2015/05/13 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python中如何导入类示例详解
2019/04/17 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python manage.py runserver流程解析
2019/11/08 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
文艺晚会开场白
2015/05/29 职场文书
教师节随笔
2015/08/15 职场文书
导游词之安徽九华山
2019/09/18 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python