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

如何使用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，直接删除就好。