ext+struts2文件上传

EXTJS配合Struts2的图片上传
最近一直在用Struts2,忽然心血来潮想做个图片上传并预览的功能,这个功能我其实在Struts1里早就玩过了的,本来以为Struts2无非也就那么一回事,但是测试成功之后发现,过程还是颇具周折的.....
我是直接拷贝的工程里的代码,所以可能有一部分无关的代码,懒得去弄了
废话不多说,上例子代码:


首先,我们新建一个BaseAction,这个Action主要就是为了实现那两个接口,我就直接把我工程里的Copy过来:
Java代码
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");
}

}

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代码
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;
}
}

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代码
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();
}
};
}

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

<?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代码
Ext.namespace("HRM.External.Image");
/**
* @author <a href="mailto:andy_ghg@163.com">葛昊</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.namespace("HRM.External.Image");
/**
* @author <a href="mailto:andy_ghg@163.com">葛昊</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代码
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 || {};
}
}
});

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代码
Ext.namespace("HRM.Employee.EmployeeInfo");

HRM.Employee.EmployeeInfo = Ext.extend(Ext.Container, {
layout : "fit",
resizable : false,
autoHeight : true,
PROJECT_NAME : "/HRM/",
style : "padding : 5px",
initComponent : function() {
HRM.Employee.EmployeeInfo.superclass.initComponent.call(this, arguments);
this.add(this.getFormPanel(true));
},
getFormPanel : function(autoCreate) {
if (autoCreate) {
return this.formPanel || (function() {
var comp = new Ext.Container({
layout : "column",
defaults : {
columnWidth : .5,
border : false
},
autoHeight : true,
items : [this.getUploadForm(), this.getEmployeeBaseForm()]
});
this.formPanel = new Ext.Container({
autoHeight : true,
baseCls : "x-plain",
border : false,
defaults : {border : false},
items : [comp, this.getBotForm()]
});
return this.formPanel;
}.createDelegate(this))();
} else {
return this.formPanel || {};
}
},
// private
getEmployeeBaseForm : function() {
return this.empBaseForm || (function() {
this.empBaseForm = new Ext.FormPanel({
defaultType : "textfield",
defaults : {
anchor : "100%"
},
labelWidth : 55,
items : [{
fieldLabel : "姓名",
allowBlank : false,
name : "name"
}, {
xtype : 'radiogroup',
fieldLabel : '性别',
items : [{
boxLabel : '男',
name : 'sex',
inputValue : "男",
checked : true
}, {
boxLabel : '女',
name : 'sex',
inputValue : "女"
}]
}, {
xtype : "datefield",
minValue : "1949-12-23",
maxValue : new Date().format("Y-m-d"),
fieldLabel : "生日",
name : "birthday"
}, {
fieldLabel : "固话号码",
name : "tel"
}, {
fieldLabel : "手机号码",
name : "mobil"
}, {
fieldLabel : "电子邮箱",
name : "email",
emptyText : "例如andy_ghg@163.com",
vtype : "email"
}, {
xtype : 'radiogroup',
fieldLabel : '婚姻状况',
items : [{
boxLabel : '已婚',
name : 'marriage',
inputValue : 1
}, {
boxLabel : "未婚",
name : 'marriage',
checked : true,
inputValue : 0
}]
}, {
xtype : "combo",
fieldLabel : "政治面貌",
triggerAction : "all",
mode : "local",
displayField : "value",
valueField : "value",
store : new Ext.data.SimpleStore({
fields : ["i", "value"],
data : [["共青团员", "共青团员"], ["中共党员", "中共党员"], ["无党派人士", "无党派人士"]]
})
}]
})
return this.empBaseForm;
}.createDelegate(this))();
},
getBotForm : function() {
return this.botForm || (function() {
this.botForm = new Ext.FormPanel({
defaultType : "textfield",
defaults : {
anchor : "100%"
},
labelWidth : 55,
items : [{
fieldLabel : "住址"
}, {
fieldLabel : "籍贯"
}]
})
return this.botForm;
}.createDelegate(this))();
},
//主要看这里,以及这里面的selected事件的监听
getUploadForm : function() {
return this.uploadForm || (function() {
this.uploadField = new HRM.External.ImageUpload({
height : 225
});
this.uploadForm = new Ext.FormPanel({
fileUpload : true,
items : this.uploadField
});
var oldImageName = "noImage";
this.uploadField.on("selected", function() {
console.log("进来了");
this.uploadForm.getForm().submit({
method : "POST",
scope : this,
params : {
oldImageName : oldImageName
},
url : "/HRM/uploadAction.do",
success : function(form,action){
console.log(action.result.msg);
this.uploadField.getImage().setImage("UploadImages/"+action.result.msg);
oldImageName = action.result.msg;
},
failure : function(form, action) {
console.log(action.result.data);
}
})
},this);
return this.uploadForm;
}.createDelegate(this))();
},
getForm : function() {
return this.getFormPanel().getForm();
}
})

Ext.onReady(function() {
var c = new HRM.Employee.EmployeeInfo({
width : 500,
autoHeight : true,
renderTo : Ext.getBody()
});
})