uplodify jQuery插件的struts2应用

uploadify 是一款不错的ajax上传文件的jQuery插件。

官方网站为：http://www.uploadify.com

 

1，下载开发包:jquery.uploadify-v2.1.0 ,目前最高版本为2.1.0

2，解压开发包。将

                  jquery-1.3.2.min.js，

                  jquery.uploadify.v2.1.0.min.js，

                  swfobject.js，

                  uploadify.swf，

                  uploadify.css，

                  cancel.png

六个文件添加到项目的对应路径中。

3，jsp页面

<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.min.js"></script>


<!--代码省略-->
<input type='file' name='logoImg' id="logoImg" >

 

4，相应的js代码

$(document).ready(function(){
$("#logoImg").uploadify({
		'uploader'       : 'uploadify/uploadify.swf',//设置uploadify.swf的路径。
		'script'         : 'faceSet_doUploadFile.action',//请求响应的Action。
		'cancelImg'      : 'uploadify/cancel.png',//设置  取消按钮图片的路径。
		'folder'         : '/',//设置上传文件后保存的路径。
		'fileDataName'   : 'logoImg',
		'displayData'    : 'percentag',
		'auto'           : true,//设置是否自动上传。
		'multi'          : false,//设置是否多文件上传。
		'onComplete'     :function(event,queueId,fileObj,response){
			//因为传回的数据时字符串，通过eval方法将其转化成JSON格式。
			var jsonObject=eval('('+response+')');
			var fileName=jsonObject.fileName;//得到回调的图片的路径。
			$("#faceSetImg").attr("src","../"+fileName+"?now="+new Date());
			$("#imgShow").show();
			$("#fileShow").hide();
		},
		'onError'       :function(event,queueID,fileObj,errorObj){
			alert("Ajax上传图片出错！请重新试过！");
		}
	});

});

 

5，struts.xml的配置文件

<action name="faceSet_*" class="org.cric.action.systemset.FaceSetAction" method="{1}">
	<result name="jsonback" type="json">
		<param name="includeProperties">
			fileName
		</param>
	</result>
</action>

 6，Action类的写法

private File logoImg;//上传的文件的File名称。
private String logoImgFileName;//该文件的文件名称
private String logoImgContentType;//该文件的文件类型
//省略Setter ,Getter方法。

public String doUploadFile()throws Exception{//ajax 上传文件.
	String path=ServletActionContext.getServletContext().getRealPath("/");//得到跟路径。
	String fileName=this.faceSetServiceImpl.uploadImg(path, this.getLogoImg(), IMGNAME);
	this.setFileName(fileName);
	return "jsonback";
}

 我使用了json插件来作为Ajax前后台媒介的交换格式！！

评论

1 楼 Jackie_GP 2011-08-19  

提供demo的全部源码下载吧