`
andy_ghg
  • 浏览: 293174 次
  • 性别: Icon_minigender_1
  • 来自: 扬州
社区版块
存档分类
最新评论

EXTJS配合Struts2的图片上传(可预览)例子代码

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


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



开始编写界面:
首先写一个图片组件,用于显示图片:
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):
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 || {};
		}
	}
});


两个组件写好之后,开始编写应用界面:
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()
	});
})

5
1
分享到:
评论
2 楼 zuyali 2012-02-08  
你好,请教个问题,图片是被存到服务器下的目录,在this.uploadField.getImage().setImage("UploadImages/"+action.result.msg); 显示图片的时候显示不出来
1 楼 yangguo 2011-08-05  
不错

相关推荐

    能运行的ExtJs+Struts2文件上传

    标签"Java extjs struts2"进一步确认了这个项目是用Java后端配合ExtJs前端实现的。在Struts2中,文件上传通常会涉及Action类,该类接收文件参数,然后调用Service层进行业务处理。同时,ExtJs的Ajax请求需要与Struts...

    Extjs+Struts2实现异步文件上传

    网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。

    Extjs4文件上传,后台struts2

    在本文中,我们将深入探讨如何使用ExtJS 4与Struts2框架实现文件上传功能。ExtJS是一个强大的JavaScript库,提供了丰富的用户界面组件,而Struts2是Java Web开发中的一个MVC框架,用于处理后端业务逻辑。下面,我们...

    ExtJS+Struts2

    在"ExtJS+Struts2"的组合中,前端使用ExtJS进行界面设计和用户交互处理。例如,"简单增删改"功能通常会涉及到ExtJS的Grid Panel组件,它能展示数据表格,支持行操作,如添加新记录、删除现有记录以及编辑单元格内容...

    extjs struts2 多图片批量上传控件

    在本场景中,"extjs struts2 多图片批量上传控件"是一个集成解决方案,允许用户通过ExtJS前端框架批量上传多张图片,并通过Struts2后端框架进行处理。 **ExtJS** 是一个基于JavaScript的UI库,它提供了丰富的组件和...

    EXTJS4+STRUTS2+JAVA增删改查

    在这个"EXTJS4+STRUTS2+JAVA增删改查"的例子中,我们将深入探讨这三个技术如何协同工作,实现数据的动态管理。 EXTJS4是一个强大的JavaScript库,主要用于创建桌面级的Web应用程序。它提供了丰富的组件库,如表格、...

    @@@extjs+struts2+json plugin的例子

    综上所述,`@@@extjs+struts2+json plugin的例子`是一个综合运用`ExtJS`前端框架、`Struts2`后端框架以及`JSON`数据交换格式的Web应用示例。这样的组合可以构建出高性能、用户体验良好的企业级应用,同时利用`Struts...

    extjs 跟 struts+json

    标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合,通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,而Struts是Java Web开发中的一个MVC...

    ExtJs + Struts2 + JSON 程序总结

    ExtJs + Struts2 + JSON 是一种常见的前端与后端数据交互的技术组合,常用于构建富客户端应用。这里我们详细探讨一下这三个技术组件以及它们如何协同工作。 首先,ExtJs 是一个JavaScript库,用于创建复杂的、用户...

    一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。 将数据从后台传到Extjs表现层。

    一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接:http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs,Struts2, json,iterator技术, 将数据从...

    struts2+extjs3 单/多文件上传

    本文将深入探讨如何使用Struts2和ExtJS3实现单文件和多文件的上传功能。 首先,我们要理解文件上传的基本流程。在Web应用中,用户通过浏览器选择本地文件,然后这些文件的数据被封装到HTTP请求中发送到服务器。...

    extjs+struts2分页例子

    这个简单的例子展示了EXTJS如何利用Struts2来获取和展示分页数据,帮助开发者快速理解并应用到实际项目中。对于初学者来说,这是一个很好的起点,可以进一步探索EXTJS和Struts2的更多高级特性,如过滤、排序和自定义...

    ExtJS与Struts2的整合工程实例

    ExtJS与Struts2是两种在Web开发中广泛使用的开源技术。ExtJS是一个JavaScript库,提供了丰富的用户界面组件和强大的数据处理能力,而Struts2则是一个基于MVC设计模式的Java Web框架,用于简化应用的开发流程。将这...

    Struts2与extjs整合例子

    标题“Struts2与extjs整合例子”表明我们将探讨如何将这两个技术结合在一起,以实现后端与前端的高效协作。在实际项目中,这样的整合可以利用Struts2的强大处理能力和ExtJS的出色用户界面,创建出功能丰富且用户体验...

    批量图片预览上传(extjs,支持html5和flash)

    在批量图片预览上传场景中,EXTJS可以用于构建前端交互界面,处理用户的选择和上传逻辑。 1. **EXTJS组件使用**:EXTJS 提供了FileField组件,可以用来接收用户选择的文件。配合UploadButton或FormPanel,可以方便...

    extjs+struts2结合实现

    7. **页面布局**:ExtJS提供了丰富的布局管理器,可以配合Struts2的视图层,实现动态、响应式的页面布局。 总的来说,ExtJS与Struts2的结合,既利用了ExtJS的强大前端展示能力,又发挥了Struts2在后端的业务处理...

    搭建EXTJS和STRUTS2框架

    EXTJS提供了丰富的UI组件和优秀的用户体验,STRUTS2则负责处理后端逻辑,两者相结合,可以构建出高效、可维护的现代Web应用程序。通过不断学习和实践,开发者可以更好地掌握这两个框架的集成技巧,提高开发效率。

    extjs与struts的整合代码

    Struts提供了拦截器、标签库和动作类等机制,使得业务逻辑和表现层分离,增强了代码的可重用性和可测试性。 **整合ExtJS与Struts:** 将ExtJS与Struts整合,可以利用ExtJS的前端交互能力,结合Struts的强大后端处理...

    extjs+struts2省市区三级联动完整示例

    在本文中,我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况,例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...

    struts2 + extjs例子

    Struts2和ExtJS是两种在Web开发中广泛使用的开源技术。Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它极大地简化了创建企业级Java应用的过程。而ExtJS则是一款强大的JavaScript库,用于...

Global site tag (gtag.js) - Google Analytics