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的跨域传输数据(JSONP)
Mar 10 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
7个jQuery最佳实践
Jan 12 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
js尾调用优化的实现
May 23 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
canvas多重阴影发光效果实现
Apr 20 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 编写大型网站问题集
2010/05/07 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
php 地区分类排序算法
2013/07/01 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
理解javascript封装
2016/02/23 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
浅谈Python中的闭包
2015/07/08 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python生成ppt的方法
2018/06/07 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
详解python变量与数据类型
2020/08/25 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
项目专员岗位职责
2013/12/04 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
天堂的孩子观后感
2015/06/11 职场文书
MySQL视图概念以及相关应用
2022/04/19 MySQL