EXTJS配合Struts2的图片上传(可预览)

   3. import javax.servlet.http.HttpServletRequest; 
   4. import javax.servlet.http.HttpServletResponse; 
   5.  
   6. import org.apache.struts2.interceptor.ServletRequestAware; 
   7. import org.apache.struts2.interceptor.ServletResponseAware; 
   8.  
   9. import cn.com.ajaxbear.vo.Account; 
  10.  
  11. import com.opensymphony.xwork2.ActionSupport; 
  12.  
  13. public class BaseAction extends ActionSupport implements ServletRequestAware, 
  14.         ServletResponseAware { 
  15.     private static final long serialVersionUID = -1513311332990213727L; 
  16.      
  17.     protected HttpServletResponse response; 
  18.  
  19.     protected HttpServletRequest request; 
  20.      
  21.     public void setServletRequest(HttpServletRequest request) { 
  22.         this.request = request; 
  23.     } 
  24.  
  25.     public void setServletResponse(HttpServletResponse response) { 
  26.         this.response = response; 
  27.     } 
  28.      
  29.     protected Account getUser(HttpServletRequest request){ 
  30.         return (Account)request.getSession().getAttribute("user"); 
  31.     } 
  32.      
  33.     protected void setUser(HttpServletRequest request, Account account){ 
  34.         request.getSession().setAttribute("user", account); 
  35.     } 
  36.      
  37.     protected void destroyUser(HttpServletRequest request){ 
  38.         request.getSession().removeAttribute("user"); 
  39.     } 
  40.  
  41. } 

package cn.com.ajaxbear.action;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;

import cn.com.ajaxbear.vo.Account;

import com.opensymphony.xwork2.ActionSupport;

public class BaseAction extends ActionSupport implements ServletRequestAware,
ServletResponseAware {
private static final long serialVersionUID = -1513311332990213727L;

protected HttpServletResponse response;

protected HttpServletRequest request;

public void setServletRequest(HttpServletRequest request) {
this.request = request;
}

public void setServletResponse(HttpServletResponse response) {
this.response = response;
}

protected Account getUser(HttpServletRequest request){
return (Account)request.getSession().getAttribute("user");
}

protected void setUser(HttpServletRequest request, Account account){
request.getSession().setAttribute("user", account);
}

protected void destroyUser(HttpServletRequest request){
request.getSession().removeAttribute("user");
}

}



然后我们新建一个Action,名字为UploadAction:
Java 代码

   1. package cn.com.ajaxbear.action; 
   2.  
   3. import java.io.File; 
   4. import java.io.FileInputStream; 
   5. import java.io.FileOutputStream; 
   6. import java.util.UUID; 
   7.  
   8. import org.apache.struts2.ServletActionContext; 
   9.  
  10. import cn.com.ajaxbear.util.XResponse; 
  11.  
  12. public class UploadAction extends BaseAction { 
  13.  
  14.     private File upload; 
  15.     private String uploadContentType; 
  16.     public File getUpload() { 
  17.         return upload; 
  18.     } 
  19.  
  20.     public void setUpload(File upload) { 
  21.         this.upload = upload; 
  22.     } 
  23.  
  24.     public String getUploadContentType() { 
  25.         return uploadContentType; 
  26.     } 
  27.  
  28.     public void setUploadContentType(String uploadContentType) { 
  29.         this.uploadContentType = uploadContentType; 
  30.     } 
  31.  
  32.     public String getUploadFileName() { 
  33.         return uploadFileName; 
  34.     } 
  35.  
  36.     public void setUploadFileName(String uploadFileName) { 
  37.         this.uploadFileName = uploadFileName; 
  38.     } 
  39.  
  40.     // 上传文件的文件名 
  41.     private String uploadFileName; 
  42.      
  43.     private String getFileExp(String name){ 
  44.         int pos = name.lastIndexOf("."); 
  45.          
  46.         return name.substring(pos); 
  47.     } 
  48.  
  49.     @Override 
  50.     public String execute() throws Exception { 
  51.         //首先判断用户是否曾经上传过,如果上传过,则删掉原来的文件(这里我没考虑其他情况,考虑周全还要写一些代码) 
  52.         String oldImageName = request.getParameter("oldImageName"); 
  53.         //如果存在则删除 
  54.         if (!"noImage".equalsIgnoreCase(oldImageName)) { 
  55.             File oldFile = new File(ServletActionContext 
  56.                 .getServletContext().getRealPath("/") 
  57.                 + "UploadImages" + File.separator+oldImageName); 
  58.             oldFile.delete(); 
  59.         } 
  60.         System.out.println(oldImageName); 
  61.         //为用户新上传的图片新取一个名字 
  62.         String newName = UUID.randomUUID().toString(); 
  63.         //获取用户上传的图片格式 
  64.         String exp = getFileExp(uploadFileName); 
  65.         //将文件写入文件夹 
  66.         FileOutputStream fos = new FileOutputStream(ServletActionContext 
  67.                 .getServletContext().getRealPath("/") 
  68.                 + "UploadImages" + File.separator + newName+exp); 
  69.         FileInputStream fis = new FileInputStream(upload); 
  70.         byte[] buffer = new byte[10240]; 
  71.         int len = 0; 
  72.         int total = fis.available(); 
  73.         System.out.println("文件大小为:"+total); 
  74.         while ((len = fis.read(buffer)) > 0) { 
  75.             fos.write(buffer, 0, len); 
  76.             fos.flush(); 
  77.         } 
  78.         fis.close(); 
  79.         fos.close(); 
  80.         //返回图片名称(路径我是在前台写死了的),注意返回的contentType不能是text/json; 
  81.         XResponse.sendMSG(response, "{success : true,msg:'"+newName+exp+"'}","text/html; charset=utf-8"); 
  82.         return NONE; 
  83.     } 
  84. } 

package cn.com.ajaxbear.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.util.UUID;

import org.apache.struts2.ServletActionContext;

import cn.com.ajaxbear.util.XResponse;

public class UploadAction extends BaseAction {

private File upload;
private String uploadContentType;
public File getUpload() {
return upload;
}

public void setUpload(File upload) {
this.upload = upload;
}

public String getUploadContentType() {
return uploadContentType;
}

public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}

public String getUploadFileName() {
return uploadFileName;
}

public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}

// 上传文件的文件名
private String uploadFileName;

private String getFileExp(String name){
int pos = name.lastIndexOf(".");

return name.substring(pos);
}

@Override
public String execute() throws Exception {
//首先判断用户是否曾经上传过,如果上传过,则删掉原来的文件(这里我没考虑其他情况,考虑周全还要写一些代码)
String oldImageName = request.getParameter("oldImageName");
//如果存在则删除
if (!"noImage".equalsIgnoreCase(oldImageName)) {
File oldFile = new File(ServletActionContext
.getServletContext().getRealPath("/")
+ "UploadImages" + File.separator+oldImageName);
oldFile.delete();
}
System.out.println(oldImageName);
//为用户新上传的图片新取一个名字
String newName = UUID.randomUUID().toString();
//获取用户上传的图片格式
String exp = getFileExp(uploadFileName);
//将文件写入文件夹
FileOutputStream fos = new FileOutputStream(ServletActionContext
.getServletContext().getRealPath("/")
+ "UploadImages" + File.separator + newName+exp);
FileInputStream fis = new FileInputStream(upload);
byte[] buffer = new byte[10240];
int len = 0;
int total = fis.available();
System.out.println("文件大小为:"+total);
while ((len = fis.read(buffer)) > 0) {
fos.write(buffer, 0, len);
fos.flush();
}
fis.close();
fos.close();
//返回图片名称(路径我是在前台写死了的),注意返回的contentType不能是text/json;
XResponse.sendMSG(response, "{success : true,msg:'"+newName+exp+"'}","text/html; charset=utf-8");
return NONE;
}
}



XResponse的代码:
Java 代码

   1. package cn.com.ajaxbear.util; 
   2.  
   3. import java.io.IOException; 
   4.  
   5. import javax.servlet.http.HttpServletResponse; 
   6.  
   7. import org.apache.commons.logging.Log; 
   8. import org.apache.commons.logging.LogFactory; 
   9.  
  10. public class XResponse { 
  11.     public XResponse() { 
  12.     } 
  13.  
  14.     protected static final Log log = LogFactory.getLog(XResponse.class); 
  15.  
  16.     public static void sendMSG(HttpServletResponse response, Object jsonData, 
  17.             String... strings) { 
  18.         if (strings.length != 0) { 
  19.             response.setContentType(strings[0]); 
  20.         }else{ 
  21.             response.setContentType("text/json; charset=utf-8"); 
  22.         } 
  23.         try { 
  24.             log.debug("<-----JSON:" + jsonData.toString()); 
  25.             response.getWriter().write(jsonData.toString()); 
  26.             response.getWriter().flush(); 
  27.         } catch (IOException e) { 
  28.             log.error(e.getMessage()); 
  29.             // e.printStackTrace(); 
  30.         } 
  31.     }; 
  32. } 

package cn.com.ajaxbear.util;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

public class XResponse {
public XResponse() {
}

protected static final Log log = LogFactory.getLog(XResponse.class);

public static void sendMSG(HttpServletResponse response, Object jsonData,
String... strings) {
if (strings.length != 0) {
response.setContentType(strings[0]);
}else{
response.setContentType("text/json; charset=utf-8");
}
try {
log.debug("<-----JSON:" + jsonData.toString());
response.getWriter().write(jsonData.toString());
response.getWriter().flush();
} catch (IOException e) {
log.error(e.getMessage());
// e.printStackTrace();
}
};
}




编写Struts2的配置文件:
Xml代码

   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="cn.com.ajaxbear.action" extends="struts-default" 
   5.         namespace="/"> 
   6.         <action name="uploadAction" class="UploadAction"> 
   7.             <interceptor-ref name="fileUpload"> 
   8.                 <param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg</param> 
   9.                 <param name="maximumSize">20000000000</param> 
  10.             </interceptor-ref> 
  11.             <interceptor-ref name="defaultStack"/>   
  12.         </action> 
  13.     </package> 
  14. </struts>     

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="cn.com.ajaxbear.action" extends="struts-default"
namespace="/">
<action name="uploadAction" class="UploadAction">
<interceptor-ref name="fileUpload">
<param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg</param>
<param name="maximumSize">20000000000</param>
</interceptor-ref>
<interceptor-ref name="defaultStack"/> 
</action>
</package>
</struts>   




开始编写界面:
首先写一个图片组件,用于显示图片:
Js代码

   1. Ext.namespace("HRM.External.Image"); 
   2. /**
   3.  * @author <a href="mailto:[e-mail]"& gt;葛昊</a></br>
   4.  * @version 1.0
   5.  * @description 图片组件
   6.  * @class HRM.External.Image
   7.  * @extends Ext.BoxComponent
   8.  */ 
   9. HRM.External.Image = Ext.extend(Ext.BoxComponent, { 
  10.     imageSrc : "", 
  11.     initComponent : function() { 
  12.         HRM.External.Image.superclass.initComponent.call(this, arguments); 
  13.         this.on("render",function(){ 
  14.             this.setImage(this.imageSrc); 
  15.         },this); 
  16.     }, 
  17.     /**
  18.      * 获取XTemplate对象
  19.      * @return {@link Ext.XTemplate}
  20.      */ 
  21.     getXTemplate : function() { 
  22.         return this.xtpl || (function() { 
  23.             this.xtpl = new Ext.XTemplate("<div><img id='{id}' src='{imgSrc}' height='{height}' width='{width}' border='{border}' /></div>"); 
  24.             return this.xtpl; 
  25.         }.createDelegate(this))(); 
  26.     }, 
  27.     /**
  28.      * 获取图片属性对象
  29.      * @return {Object}
  30.      */ 
  31.     getImage : function() { 
  32.         return this.imageData || (function() { 
  33.             this.imageData = { 
  34.                 id : this.getId()+"_img", 
  35.                 imgSrc : "", 
  36.                 height : this.height, 
  37.                 width : this.width, 
  38.                 border : 0 
  39.             } 
  40.             return this.imageData; 
  41.         }.createDelegate(this))(); 
  42.     }, 
  43.     /**
  44.      * 设置图片路径
  45.      * @param {String} src 图片路径
  46.      */ 
  47.     setImage : function(src) { 
  48.         this.getImage().imgSrc = src; 
  49.         console.log(this.getImage()); 
  50.         this.getXTemplate().overwrite(this.getEl(),this.getImage()); 
  51.     } 
  52. }); 
  53.  
  54. Ext.reg("ximage",HRM.External.Image); 

Ext.namespace("HRM.External.Image");
/**
* @author <a href="mailto:[e-mail]">葛昊</a></br>
* @version 1.0
* @description 图片组件
* @class HRM.External.Image
* @extends Ext.BoxComponent
*/
HRM.External.Image = Ext.extend(Ext.BoxComponent, {
imageSrc : "",
initComponent : function() {
HRM.External.Image.superclass.initComponent.call(this, arguments);
this.on("render",function(){
this.setImage(this.imageSrc);
},this);
},
/**
* 获取XTemplate对象
* @return {@link Ext.XTemplate}
*/
getXTemplate : function() {
return this.xtpl || (function() {
this.xtpl = new Ext.XTemplate("<div><img id='{id}' src='{imgSrc}' height='{height}' width='{width}' border='{border}' /></div>");
return this.xtpl;
}.createDelegate(this))();
},
/**
* 获取图片属性对象
* @return {Object}
*/
getImage : function() {
return this.imageData || (function() {
this.imageData = {
id : this.getId()+"_img",
imgSrc : "",
height : this.height,
width : this.width,
border : 0
}
return this.imageData;
}.createDelegate(this))();
},
/**
* 设置图片路径
* @param {String} src 图片路径
*/
setImage : function(src) {
this.getImage().imgSrc = src;
console.log(this.getImage());
this.getXTemplate().overwrite(this.getEl(),this.getImage());
}
});

Ext.reg("ximage",HRM.External.Image);



再写一个上传组件(使用官方插件Ext.ux.form.FileUploadField):
Js代码

   1. HRM.External.ImageUpload = Ext.extend(Ext.Container, { 
   2.     url : "", 
   3.     style : "padding : 5px", 
   4.     initComponent : function() { 
   5.         HRM.External.ImageUpload.superclass.initComponent.call(this, arguments); 
   6.         this.addEvents("selected"); 
   7.         this.add(this.getImage(true), this.getUploadField(true)); 
   8.     }, 
   9.     getImage : function(autoCreate) { 
  10.         if (autoCreate) { 
  11.             return this.image || (function() { 
  12.                 this.image = new HRM.External.Image({ 
  13.                     height : this.height - 35, 
  14.                     width : this.width - 10, 
  15.                     imageSrc : "src/Resources/images/default.gif" 
  16.                 }); 
  17.                 return this.image; 
  18.             }.createDelegate(this))(); 
  19.         } else { 
  20.             return this.image || {}; 
  21.         } 
  22.     }, 
  23.     getUploadField : function(autoCreate) { 
  24.         if (autoCreate) { 
  25.             return this.uploadField || (function() { 
  26.                 //Ext.ux.Form.FileUploadField是官方的插件,可以再例子里看到它 
  27.                 this.uploadField = new Ext.ux.form.FileUploadField({ 
  28.                     width : this.width, 
  29.                     name : "upload", 
  30.                     buttonText : "选择照片.." 
  31.                 }); 
  32.                 this.uploadField.on("fileselected", function(obj, value) { 
  33.                     this.fireEvent("selected"); 
  34.                 }, this); 
  35.                 return this.uploadField; 
  36.             }.createDelegate(this))(); 
  37.         } else { 
  38.             return this.uploadField || {}; 
  39.         } 
  40.     } 
  41. }); 

HRM.External.ImageUpload = Ext.extend(Ext.Container, {
url : "",
style : "padding : 5px",
initComponent : function() {
HRM.External.ImageUpload.superclass.initComponent.call(this, arguments);
this.addEvents("selected");
this.add(this.getImage(true), this.getUploadField(true));
},
getImage : function(autoCreate) {
if (autoCreate) {
return this.image || (function() {
this.image = new HRM.External.Image({
height : this.height - 35,
width : this.width - 10,
imageSrc : "src/Resources/images/default.gif"
});
return this.image;
}.createDelegate(this))();
} else {
return this.image || {};
}
},
getUploadField : function(autoCreate) {
if (autoCreate) {
return this.uploadField || (function() {
//Ext.ux.Form.FileUploadField是官方的插件,可以再例子里看到它
this.uploadField = new Ext.ux.form.FileUploadField({
width : this.width,
name : "upload",
buttonText : "选择照片.."
});
this.uploadField.on("fileselected", function(obj, value) {
this.fireEvent("selected");
}, this);
return this.uploadField;
}.createDelegate(this))();
} else {
return this.uploadField || {};
}
}
});



两个组件写好之后,开始编写应用界面:
Java 代码

   1. Ext.namespace("HRM.Employee.EmployeeInfo"); 
   2.  
   3. HRM.Employee.EmployeeInfo = Ext.extend(Ext.Container, { 
   4.     layout : "fit", 
   5.     resizable : false, 
   6.     autoHeight : true, 
   7.     PROJECT_NAME : "/HRM/", 
   8.     style : "padding : 5px", 
   9.     initComponent : function() { 
  10.         HRM.Employee.EmployeeInfo.superclass.initComponent.call(this, arguments); 
  11.         this.add(this.getFormPanel(true)); 
  12.     }, 
  13.     getFormPanel : function(autoCreate) { 
  14.         if (autoCreate) { 
  15.             return this.formPanel || (function() { 
  16.                 var comp = new Ext.Container({ 
  17.                     layout : "column", 
  18.                     defaults : { 
  19.                         columnWidth : .5, 
  20.                         border : false 
  21.                     }, 
  22.                     autoHeight : true, 
  23.                     items : [this.getUploadForm(), this.getEmployeeBaseForm()] 
  24.                 }); 
  25.                 this.formPanel = new Ext.Container({ 
  26.                     autoHeight : true, 
  27.                     baseCls : "x-plain", 
  28.                     border : false, 
  29.                     defaults : {border : false}, 
  30.                     items : [comp, this.getBotForm()] 
  31.                 }); 
  32.                 return this.formPanel; 
  33.             }.createDelegate(this))(); 
  34.         } else { 
  35.             return this.formPanel || {}; 
  36.         } 
  37.     }, 
  38.     // private 
  39.     getEmployeeBaseForm : function() { 
  40.         return this.empBaseForm || (function() { 
  41.             this.empBaseForm = new Ext.FormPanel({ 
  42.                 defaultType : "textfield", 
  43.                 defaults : { 
  44.                     anchor : "100%" 
  45.                 }, 
  46.                 labelWidth : 55, 
  47.                 items : [{ 
  48.                     fieldLabel : "姓名", 
  49.                     allowBlank : false, 
  50.                     name : "name" 
  51.                 }, { 
  52.                     xtype : 'radiogroup', 
  53.                     fieldLabel : '性别', 
  54.                     items : [{ 
  55.                         boxLabel : '男', 
  56.                         name : 'sex', 
  57.                         inputValue : "男", 
  58.                         checked : true 
  59.                     }, { 
  60.                         boxLabel : '女', 
  61.                         name : 'sex', 
  62.                         inputValue : "女" 
  63.                     }] 
  64.                 }, { 
  65.                     xtype : "datefield", 
  66.                     minValue : "1949-12-23", 
  67.                     maxValue : new Date().format("Y-m-d"), 
  68.                     fieldLabel : "生日", 
  69.                     name : "birthday" 
  70.                 }, { 
  71.                     fieldLabel : "固话号码", 
  72.                     name : "tel" 
  73.                 }, { 
  74.                     fieldLabel : "手机号码", 
  75.                     name : "mobil" 
  76.                 }, { 
  77.                     fieldLabel : "电子邮箱", 
  78.                     name : "email", 
  79.                     emptyText : "例如[e-mail]", 
  80.                     vtype : "email" 
  81.                 }, { 
  82.                     xtype : 'radiogroup', 
  83.                     fieldLabel : '婚姻状况', 
  84.                     items : [{ 
  85.                         boxLabel : '已婚', 
  86.                         name : 'marriage', 
  87.                         inputValue : 1 
  88.                     }, { 
  89.                         boxLabel : "未婚", 
  90.                         name : 'marriage', 
  91.                         checked : true, 
  92.                         inputValue : 0 
  93.                     }] 
  94.                 }, { 
  95.                     xtype : "combo", 
  96.                     fieldLabel : "政治面貌", 
  97.                     triggerAction : "all", 
  98.                     mode : "local", 
  99.                     displayField : "value", 
100.                     valueField : "value", 
101.                     store : new Ext.data.SimpleStore({ 
102.                         fields : ["i", "value"], 
103.                         data : [["共青团员", "共青团员"], ["中共党员", "中共党员"], ["无党派人士", "无党派人士"]] 
104.                     }) 
105.                 }] 
106.             }) 
107.             return this.empBaseForm; 
108.         }.createDelegate(this))(); 
109.     }, 
110.     getBotForm : function() { 
111.         return this.botForm || (function() { 
112.             this.botForm = new Ext.FormPanel({ 
113.                 defaultType : "textfield", 
114.                 defaults : { 
115.                     anchor : "100%" 
116.                 }, 
117.                 labelWidth : 55, 
118.                 items : [{ 
119.                     fieldLabel : "住址" 
120.                 }, { 
121.                     fieldLabel : "籍贯" 
122.                 }] 
123.             }) 
124.             return this.botForm; 
125.         }.createDelegate(this))(); 
126.     }, 
127.     //主要看这里,以及这里面的selected事件的监听 
128.     getUploadForm : function() { 
129.         return this.uploadForm || (function() { 
130.             this.uploadField = new HRM.External.ImageUpload({ 
131.                 height : 225 
132.             }); 
133.             this.uploadForm = new Ext.FormPanel({ 
134.                 fileUpload : true, 
135.                 items : this.uploadField 
136.             }); 
137.             var oldImageName = "noImage"; 
138.             this.uploadField.on("selected", function() { 
139.                 console.log("进来了"); 
140.                 this.uploadForm.getForm().submit({ 
141.                     method : "POST", 
142.                     scope : this, 
143.                     params : { 
144.                         oldImageName : oldImageName 
145.                     }, 
146.                     url : "/HRM/uploadAction.do", 
147.                     success : function(form,action){ 
148.                         console.log(action.result.msg); 
149.                         this.uploadField.getImage().setImage("UploadImages/"+action.result.msg); 
150.                         oldImageName = action.result.msg; 
151.                     }, 
152.                     failure : function(form, action) { 
153.                         console.log(action.result.data); 
154.                     } 
155.                 }) 
156.             },this); 
157.             return this.uploadForm; 
158.         }.createDelegate(this))(); 
159.     }, 
160.     getForm : function() { 
161.         return this.getFormPanel().getForm(); 
162.     } 
163. }) 
164.  
165. Ext.onReady(function() { 
166.     var c = new HRM.Employee.EmployeeInfo({ 
167.         width : 500, 
168.         autoHeight : true, 
169.         renderTo : Ext.getBody() 
170.     }); 
171. })