jquery uploadify如何取消已上传成功文件
如何使用uploadify进行文件上传,各位都能够在网上找到,但是需要注意版本号.我这里仅仅说一下,在文件已经成功上传到服务器之后,如何取消文件的上传.
我使用的是自动上传，即将'auto'属性设置为true.
1.首先我们要设置cancelmg属性,即设置文件上传成功后,显示在文件上的关闭图片.这里需要修改对应CSS中的代码
.uploadify-queue-item.cancela{
background:url('../img/uploadify-cancel.png')00no-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){
varcancel=$('#fileQueue.uploadify-queue-item[id="'+file.Id+'"]').find(".cancela");
if(cancel){
cancel.attr("deletefileid",file.id);
cancel.click(function(){
//我的处理逻辑
//1.首先调用ajax传递文件名到后台,后台删除对应的文件(这个我就不写了)
//2.从后台返回的为true,表明删除成功;返回false,表明删除失败
vardeletefileid=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){
varargs=arguments;
this.each(function(){
//CreateareferencetothejQueryDOMobject
var$this=$(this),
swfuploadify=$this.data('uploadify'),
settings=swfuploadify.settings,
delay=-1;
if(args[0]){
//Clearthequeue
if(args[0]=='*'){
varqueueItemCount=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;
//TriggertheonClearQueueevent
if(settings.onClearQueue)settings.onClearQueue.call($this,queueItemCount);
}else{
for(varn=0;n<args.length;n++){
swfuploadify.cancelUpload(args[n]);
/*添加代码*/
deleteswfuploadify.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{
varitem=$('#'+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，直接删除就好。