当前位置:首页 > 日记 > 正文

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

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

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

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

1.首先我们要设置cancelmg属性,即设置文件上传成功后,显示在文件上的关闭图片.这里需要修改对应CSS中的代码

.uploadify-queue-item .cancel a {   background: url('../img/uploadify-cancel.webp') 0 0 no-repeat;   float: right;   height: 16px;   text-indent: -9999px;   width: 16px; } 

将这里url中的uploadify-cancel.webp的地址设置正确.这时可以看到上传的文件后会显示对应的取消关闭图片.当然我们不修改源码,将图片放置在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,直接删除就好。

相关文章

qq个性签名情侣发光

qq个性签名情侣发光

个性签名,情侣,大全,电脑软件,qq,  一句个性签名:其实不是因为她漂亮才喜欢她,而是喜欢她后才发现她漂亮。下面小编给大家分享了关于qq个性签名情侣发光,希望你喜欢。qq个性签名情侣发光精选1) 原以为爱情这辈子都没有了,结果还是等到她了。2…

怎样给word文字添加动态效果

怎样给word文字添加动态效果

动态,文字,步骤,效果,电脑软件,  我们在用Word编辑文本的时候,有需要对相关特定文字添加动态效果,使其在整个文本中更为突出。那么下面就由小编给大家分享下给word文字添加动态效果的技巧,希望能帮助到您。word文字添加动态效果的步骤步骤一…

vue绑定class与行间样式style详解

vue绑定class与行间样式style详解

绑定,详解,样式,电脑软件,vue,一、绑定class属性的方式1、通过数组的方式,为元素绑定多个class<style> .red { color:red; /*color:#ff8800;*/ } .bg { background: #000; /*background: green;*/ } </style> window.onlo…

怎么在WPS表格中使用语音功能WPS表

怎么在WPS表格中使用语音功能WPS表

语音,步骤,使用教程,表格,功能,  wps表格2010有个语音功能,它可以用来核对数据,可以设置朗读的方法,学会它可以使你减少输入错误,提高办公效率。下面小编就教你怎么在WPS表格中使用语音功能。希望对你有帮助!WPS表格中使用语音功能的步骤利用…

AngularJS中ng-class用法实例分析

AngularJS中ng-class用法实例分析

实例分析,电脑软件,AngularJS,ng,class,本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考,具体如下:使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化,先前添加…

javascript浏览器用户代理检测脚本

javascript浏览器用户代理检测脚本

浏览器,用户代理,脚本,检测,方法,以下是完整的用户代理字符串检测脚本,包括检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统。var client = function(){ // 呈现引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtm…

PS怎么绘制一朵简单的黄蕊花朵?

PS怎么绘制一朵简单的黄蕊花朵?

绘制,简单,电脑软件,PS,PS绘画出花朵的教程,很简单,详细图文如下。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建一个如图大小的背景图层然后在上面新建一个图层 2、利用钢笔工具在图层上描出一…

Indesign怎么快速全屏查看制作中的

Indesign怎么快速全屏查看制作中的

文档,全屏,快速,电脑软件,Indesign,在使用Indesign进行排版工作的时候,设计之中只能查看局部,不能全局查看作品的完成度,其实,ID有着非常贴心的全屏查看功能,操作也非常非常的简单,来一起看一下。软件名称:Adobe InDesign CC 2017 v12.0.0 中文破…

AI字体不转曲怎么填充渐变色?

AI字体不转曲怎么填充渐变色?

填充,渐变色,字体,不转,电脑软件,在AI设计应用中,我们知道一般情况下要对输入的文字字体做渐变效果填充时,需要创建轮廓(快捷键:ctrl+shift+O),那么问题来了:创建轮廓后,文字内容不支持键入修改,即此时文字已转变成图层,一旦发现内容有误,又需要删除重…

PS怎么设计暗红色的砖墙纹理图案?

PS怎么设计暗红色的砖墙纹理图案?

纹理,砖墙,暗红色,图案,电脑软件,PS软件应用范围十分广泛,深受广大观众的喜欢,主要应用到图片处理,文字排版,图形设计,网页设计,建筑效果图的修饰等多个方面,下面和小编一起来学习如何用PS设计红砖纹理这篇文章吧。软件名称:Adobe Photoshop 8.0 中…

用DNS服务器技术检查排除网络故障

用DNS服务器技术检查排除网络故障

检查,网络故障,服务器,技术,电脑软件,服务器不仅仅是企业网络设备的中枢,也是企业软件及数据库应用的主体。在实际运行中服务器经常会出现这样或那样的故障,软件的或者硬件的。很多故障是没有规律可言的,实际上,很多网络故障是因为DNS服务器造…

js中apply与call简单用法详解

js中apply与call简单用法详解

详解,简单,电脑软件,js,apply,你可以直接看例子,也可以先读一下介绍:call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。call, apply都属于Function.prototype的一…