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页面
Html代码

1. <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
2. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
3. <script type="text/javascript" src="uploadify/swfobject.js"></script>
4. <script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.min.js"></script>
5.
6.
7. <!--代码省略-->
8. <input type='file' name='logoImg' id="logoImg" >

<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代码
Js代码

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

$(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的配置文件
Xml代码

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

<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类的写法
Java代码

1. private File logoImg;//上传的文件的File名称。
2. private String logoImgFileName;//该文件的文件名称
3. private String logoImgContentType;//该文件的文件类型
4. //省略Setter ,Getter方法。
5.
6. public String doUploadFile()throws Exception{//ajax 上传文件.
7. String path=ServletActionContext.getServletContext().getRealPath("/");//得到跟路径。
8. String fileName=this.faceSetServiceImpl.uploadImg(path, this.getLogoImg(), IMGNAME);
9. this.setFileName(fileName);
10. return "jsonback";
11. }

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前后台媒介的交换格式！！