swfupload删除已经上传的文件队列中特定的文件

    swfupload上传文件中会生成一个队列,记录已经上传的文件. 而当用户用删除某个已经上传的文件时就显得有点麻烦,而且如果在设置中已经设定只能上传一个文件的话,即使取消了已经上传的文件,当你再继续上传时,swfupload仍会提示你文件数量已经超标.

    为了实现删除已经上传的文件还能继续上传定量的文件,笔者重新研究了一下swfupload提供的函数, 发现借助jQuery可以手动添加一些数据后实现数据删除.

    其中用到swfupload的方法有:

   1.改写handler.js中的uploadSuccess方法,也不改写,是多添加一些方法进去,改写如下:

 

function uploadSuccess(file, serverData) {try {var progress = new FileProgress(file, this.customSettings.progressTarget);progress.setComplete();//转为json对象var obj = jQuery.parseJSON(serverData);//显示已经上传图片列表(这是一个已经上传文件列表的div)$('#qrcode-page-5-picture-list').css('display','');//文件列表内容var html = '<div id="file-'+file.id+'" class="upload-queue-item" style="height:50px;">'                      +'<div class="preview">'                          +'<a href="#link" target="file_preview">'                             +'<img width="48" height="48" src="'+obj.image_src+'">'                           +'</a>'                      +'</div>'                      +'<div class="fileinfo">'                        +'<div class="cancel uploadedFileCancel"> </div>'                        +'<span class="fileName">'+obj.image_filename+'</span>'//注意这里的cancelUploadFile(file.id),这是个自定义函数+'<span onClick="javascript:cancelUploadedFile(\''+file.id+'\');return false;" style="display:inline-block;float:right;cursor:pointer;">X</span>'                       +'</div>'                +'</div>';$('#qrcode-page-5-picture-list').append(html);//progress.setStatus("上传完成.");progress.toggleCancel(false);} catch (ex) {this.debug(ex);}}

这样可以根据已经上传的文件的id来确定要删除的文件

 

2. 下面是自定义的cancelUploadFile(fileid)函数:

 

function cancelUploadedFile(fileid){if (!fileid){return false;}//这里的uupload1是SWFUpload对象//获取对象的状态var stats = upload1.getStats();//删除队列中的特定文件upload1.cancelUpload(fileid, false);//把队列状态中的成功上传文件数减一,这是关键,不减一,swfupload以为并未取消成功upload1.setStats({successful_uploads:(stats.successful_uploads-1)});////删除文件列表内容$('#file-'+fileid).remove();}

这样,当点击"X"按钮时,就可以删除对应file.id的文件了

 

其他的相关的css+div页面排版,及swfupload对象的创建就不多废话了,相信会看这篇文章的人基本都会做这