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