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对象的创建就不多废话了,相信会看这篇文章的人基本都会做这