Struts2 +jquery+ajaxfileupload 实现无刷新上传文件

由于项目需求,需要实现无刷新上传图片,在网上找了好多例子都不是很好 最总让我找到了Struts2 +jquery+ajaxfileupload 方式,个人尝试下来比较的不错。

所用到的包和文件

struts2 core所有核心包和truts2-json-plugin 插件

ajaxfileupload.js文件

jquery.js 文件  我使用的是jquery.1.2.1.js

jsp页面代码如下:

 

[html]  view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5.     <head>  
  6.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7.         <title>Insert title here</title>  
  8.         <script type="text/javascript" src="js/jquery.js"></script>  
  9.         <script type="text/javascript" src="js/ajaxfileupload.js"></script>  
  10.         <script type="text/javascript">  
  11.     function ajaxFileUpload()  
  12.     {  
  13.           
  14.         $("#loading")  
  15.         .ajaxStart(function(){  
  16.             $(this).show();  
  17.         })//开始上传文件时显示一个图片  
  18.         .ajaxComplete(function(){  
  19.             $(this).hide();  
  20.         });//文件上传完成将图片隐藏起来  
  21.           
  22.         $.ajaxFileUpload  
  23.         (  
  24.             {  
  25.                 url:'fileUploadAction.action',//用于文件上传的服务器端请求地址  
  26.                 secureuri:false,//一般设置为false  
  27.                 fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />  
  28.                 dataType: 'json',//返回值类型 一般设置为json  
  29.                 success: function (data, status)  //服务器成功响应处理函数  
  30.                 {  
  31.                     //alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中定义的成员变量  
  32.                     $("#testImg").attr("src",data.message);  
  33.                     if(typeof(data.error) != 'undefined')  
  34.                     {  
  35.                         if(data.error != '')  
  36.                         {  
  37.                             alert(data.error);  
  38.                         }else  
  39.                         {  
  40.                             alert(data.message);  
  41.                         }  
  42.                     }  
  43.                 },  
  44.                 error: function (data, status, e)//服务器响应失败处理函数  
  45.                 {  
  46.                     alert(e);  
  47.                 }  
  48.             }  
  49.         )  
  50.           
  51.         return false;  
  52.   
  53.     }  
  54.     </script>  
  55.     </head>  
  56.     <body>  
  57.         <img src="loading.gif" id="loading" style="display: none;">  
  58.         <input type="file" id="file" name="file" />  
  59.         <br />  
  60.         <input type="button" value="上传" onclick="return ajaxFileUpload();">  
  61.         <img id="testImg" alt="" src="">  
  62.     </body>  
  63. </html>  

 action代码

 

 

[java]  view plain copy
  1. package com.ajaxfile.action;  
  2.   
  3. import java.io.File;  
  4. import java.io.FileInputStream;  
  5. import java.io.FileOutputStream;  
  6.   
  7. import org.apache.struts2.ServletActionContext;  
  8.   
  9. import com.opensymphony.xwork2.ActionSupport;  
  10.   
  11. @SuppressWarnings("serial")  
  12. public class FileAction extends ActionSupport {  
  13.   
  14.     private File file;  
  15.     private String fileFileName;  
  16.     private String fileFileContentType;  
  17.   
  18.     private String message = "上传图片成功";  
  19.       
  20.     public String getMessage() {  
  21.         return message;  
  22.     }  
  23.   
  24.     public void setMessage(String message) {  
  25.         this.message = message;  
  26.     }  
  27.   
  28.     public File getFile() {  
  29.         return file;  
  30.     }  
  31.   
  32.     public void setFile(File file) {  
  33.         this.file = file;  
  34.     }  
  35.   
  36.     public String getFileFileName() {  
  37.         return fileFileName;  
  38.     }  
  39.   
  40.     public void setFileFileName(String fileFileName) {  
  41.         this.fileFileName = fileFileName;  
  42.     }  
  43.   
  44.     public String getFileFileContentType() {  
  45.         return fileFileContentType;  
  46.     }  
  47.   
  48.     public void setFileFileContentType(String fileFileContentType) {  
  49.         this.fileFileContentType = fileFileContentType;  
  50.     }  
  51.   
  52.     @SuppressWarnings("deprecation")  
  53.     @Override  
  54.     public String execute() throws Exception {        
  55.         String path = ServletActionContext.getRequest().getRealPath("/upload");  
  56.         try {  
  57.             File f = this.getFile();  
  58.             if(this.getFileFileName().endsWith(".exe")){  
  59.                 message="文件错误";  
  60.                 return ERROR;  
  61.             }  
  62.             FileInputStream inputStream = new FileInputStream(f);  
  63.             FileOutputStream outputStream = new FileOutputStream(path + "/"this.getFileFileName());  
  64.             byte[] buf = new byte[1024];  
  65.             int length = 0;  
  66.             while ((length = inputStream.read(buf)) != -1) {  
  67.                 outputStream.write(buf, 0, length);  
  68.             }  
  69.             inputStream.close();  
  70.             outputStream.flush();  
  71.             this.setMessage("http://10.1.2.121:8080/ajaxfile/upload/"+this.getFileFileName());  
  72.         } catch (Exception e) {  
  73.             e.printStackTrace();  
  74.             message = "上传异常!!!!";  
  75.         }  
  76.         return SUCCESS;  
  77.     }  
  78.   
  79. }  


struts2配置文件

 

 

[html]  view plain copy
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">  
  3. <struts>  
  4.     <package name="struts2" extends="json-default">  
  5.         <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">  
  6.             <result type="json" name="success">  
  7.                 <param name="contentType">text/html</param>  
  8.             </result>  
  9.             <result type="json" name="error">  
  10.                 <param name="contentType">text/html</param>  
  11.             </result>  
  12.         </action>  
  13.     </package>  
  14. </struts>      
注意:在引入js文件的时候需要先引入jquery.js文件, ajaxfileupload.js依赖jquery文件。

你可能感兴趣的:(ajaxFileUpload)