struts+swfupload实现批量图片上传（上）：swfupload

custom_settings : {
	progressTarget : "fsUploadProgress",
	cancelButtonId : "btnCancel",
	uploadButtonId : "btnUpload",
	myFileListTarget : "idFileList"
},

 custom_settings调用方法 this.customSettings.cancelButtonId

缩略图js 
//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false); 替换this.startUpload();

完成文件入列队（fileQueued） →
完成选择文件（fileDialogComplete） → 开始上传文件（uploadStart） → 上传处理（uploadProgress） → 上传成功（uploadSuccess） → 上传完成（uploadComplete）  →列队完成（queueComplete）
如上所示，单选文件顺序执行以上回调函数，需要注意的是选择多个文件，fileQueued、queueComplete只会执行一次，而fileDialogComplet...→ uploadComplete每个文件都执行一次。

use_query_string  该属性可选值为true和false，设置post_params是否以GET方式发送。如果为false，那么则以POST形式发送。

post_params 定义的是一个包含值对的object类型数据，每个文件上传的时候，其中的值对都会被一同发送到服务端。

prevent_swf_caching 默认值：true
(v2.2.0新增)该布尔值设置是否在Flash URL后添加一个随机值，用来防止浏览器缓存了该SWF影片。这是为了解决一些基于IE-engine的浏览器上的出现一个BUG。
button_action默认值：SWFUpload.BUTTON_ACTION.SELECT_FILES(多文件上传)
(v2.2.0新增) 设置Flash Button点击以后的动作。默认为SWFUpload.BUTTON_ACTION.SELECT_FILES，点击按钮将会打开多文件上传的对话框。 如果设置为SWFUpload.BUTTON_ACTION.SELECT_FILE，则为单文件上传。如果设置为 SWFUpload.BUTTON_ACTION.START_UPLOAD，则启动文件上传。

file_post_name : "Filedata" ,默认值： Filedata

该参数设置了POST信息中上传文件的name值（类似传统Form中设置了<input type="file" name="uploadImg"/>的name属性）。

<input id="btnCancel" type="button" value="取消全部" onclick="swfu.cancelQueue();"/>

<input id="btnCancel" type="button" value="上传相片" onclick="swfu.startUpload();"/>

 

File Object
File Object包含了一组可用的文件属性，很多处理事件都会传递一个File Object参数来访问该文件的相关属性。
{
id : string, // SWFUpload控制的文件的id,通过指定该id可启动此文件的上传、退出上传等
index : number, // 文件在选定文件队列（包括出错、退出、排队的文件）中的索引，getFile可使用此索引
name : string, // 文件名，不包括文件的路径。
size : number, // 文件字节数
type : string, // 客户端操作系统设置的文件类型
creationdate : Date, // 文件的创建时间
modificationdate : Date, // 文件的最后修改时间
filestatus : number // 文件的当前状态，对应的状态代码可查看SWFUpload.FILE_STATUS
}

Stats Object
该对象提供了上传队列的状态信息，访问实例的getStats方法可获取此对象。
该对象包括下面属性：
{
in_progress : number // 值为1或0，1表示当前有文件正在上传，0表示当前没有文件正在上传
files_queued : number // 当前上传队列中存在的文件数量
successful_uploads : number // 已经上传成功（uploadSuccess触发）的文件数量
upload_errors : number // 已经上传失败的文件数量 (不包括退出上传的文件)
upload_cancelled : number // 退出上传的文件数量
queue_errors : number // 入队失败（fileQueueError触发）的文件数量
}
所有这些属性的值都可以使用setStats方法来修改，除了in_progress 和 files_queued。

成功上传个数
this.getStats().successful_uploads
等待上传个数
swfUploadInstance.getStats().files_queued;

swfupload_loaded_handler
该事件函数是内部事件，因此不能被重写。当SWFupload实例化，加载的FLASH完成所有初始化操作时触发此事件。
file_dialog_complete_handler : fileDialogComplete
如果你希望在用户选择完文件后自动开始上传操作，那么可以将 this.startUpload() 操作放在这里 。如果想选择 后单独上传就不要加入 file_dialog_complete_handler : fileDialogComplete，或加入里面不能有this.startUpload()

 

function fileDialogComplete(numFilesSelected, numFilesQueued) {
    try {
        if (numFilesSelected > 0) {
            document.getElementById(this.customSettings.cancelButtonId).disabled = false;
        }
        /* I want auto start the upload and I can do that here */
        if(this.settings.auto_upload){//是否要上传
            this.startUpload();
        }
    } catch (ex)  {
        this.debug(ex);
    }
}

 

支持一键批量上传

function uploadComplete(file) {
	try {
		/*  I want the next upload to continue automatically so I'll call startUpload here */
		if (this.getStats().files_queued > 0) {
			//this.startResizedUpload(this.getFile(0).ID, this.customSettings.thumbnail_width, this.customSettings.thumbnail_height, SWFUpload.RESIZE_ENCODING.JPEG, this.customSettings.thumbnail_quality, false);
			this.startUpload();
		} else {
			var progress = new FileProgress(file,  this.customSettings.upload_target);
			progress.setComplete();
			progress.setStatus("All images received.");
			progress.toggleCancel(false);
		}
	} catch (ex) {
		this.debug(ex);
	}
}

 系统默认的js是swfupload.js，其他的都是自己开发修改的添加捕获事件函数如handlers.js。 file上传前的图片信息，serverData接收服务端字符串并转为数组类型，可以返回处理后的图片信息。后台处理程序必须 返回输出 字符串（json_encode转换或拼接等）

function uploadSuccess(file, serverData) {
    var isSuccess = (serverData.indexOf("successed")==0?true:false);
    try {
        if(isSuccess){//上传成功回调
            var tr = document.getElementById(file.id);
            tr.style.color="green";
            var bar = document.getElementById(file.id+"_bar");
            bar.parentNode.innerHTML="上传成功";
            var delObject = document.getElementById(file.id+"_del");
            delObject.parentNode.innerHTML=" ";
            document.getElementById(this.customSettings.myFileListTarget+"Count").innerHTML=this.getStats().files_queued;
        //addImage("index.php?r=site/Thumb&id=" + serverData.substring(7));    //缩略图的显示     
        }else{
            var tr = document.getElementById(file.id);
            tr.style.color="red";
            var bar = document.getElementById(file.id+"_bar");
            bar.parentNode.innerHTML="上传失败:"+serverData;
            var delObject = document.getElementById(file.id+"_del");
            delObject.parentNode.innerHTML=" ";
        }
    } catch (ex) {
        this.debug(ex);
    }
}

功能完全支持ie和firefox浏览器！同样也支持safari浏览器！
一般的WEB方式文件上传只能一个一个的进行上传，在某些应用上就显得很不人性化，客户们都希望能够1次选择很多文件，然后让系统把选择的文件全部上传。

有些朋友看到这里，就知道了，其实就是swfupload方法，具体信息可以访问swfupload官方网站：http://www.swfupload.org/
让我们先来看看客户端的界面效果图。（多选文件，批量上传，上传进度显示）

要做到图中的效果，其实很方便，看完下面的描述，相信大家都可以实现上图中的效果了。
说明：swfupload2中通过一个png图片与flash插件进行关联，可以修改images下的png图片来（如上图中的[选择文件]图片）自定义显示自己想要的图片样子（不要修改图片名字和格式）。

 本文转载于：http://hudeyong926.iteye.com/blog/904373