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