项目中有个地方要实现用户上传头像的功能,这其实是个非常简单的功能,刚开始的时候,我的思路是采用使用Ext.Ajax来异步上传头像的,但是无论怎么实现后台都得不到文件,反复验证了后台的Struts2的代码没有错误,配置文件也没有错误,开始反思原因,经过google后发现,其实上传文件的时候用ajax是不能实现的,因为文件传递安全性方面的考虑,ajax只能将文件名传递到后台,并不能将文件本身传递给后台,要在extjs实现文件上传必须采用在form中提交的方式,不过为了实现类似于ajax的用户体验,可以在配置项中添加fileUpload:true的方式,来实现异步提交,而不必出现页面跳转的方式。废话不多说了看代码:
Extjs代码:
var imageform = new Ext.FormPanel({
id: 'imageform',
labelWidth: 80,
labelAlign : 'right',
border : false,
fileUpload: true,
bodyStyle : 'padding:10px 8px 8px 8px;',
items:[{
xtype: 'fieldset',
title: '设置头像',
collapsible: true,
labelWidth: 69,
collapsed: true,
layout:'form',
items: [{
xtype: 'fileuploadfield',
id: 'upload',
name: 'upload',
emptyText: '选择相片地址',
fieldLabel: '上传路径',
buttonText: '',
width:440,
buttonCfg: {
iconCls: 'upload-avatar'
},
anchor : '96%'
},{
border:false,
layout:'form',
fieldLabel : "预览图片",
items:[
{
xtype:'panel',
border:false,
layout:'column',
items:[{
xtype : 'box',
id : 'browseImage',
columnWidth:.35,
bodyStyle:'padding:10px 10px 10px 10px;',
autoEl : {
width : 102,
height : 125,
tag : 'img',
src : avatarurl
}
},{
columnWidth:.5,
labelAlign :'left',
border:false,
buttonAlign:'center',
bodyStyle:'margin-left:10px;padding:5px',
items:[{
xtype : 'label',
fieldLabel:'',
html: '<ul><li>1、图片格式只能是jpg格式。</li></ul><br/>'
},{
xtype : 'label',
fieldLabel:'',
html: '<ul><li>2、图片大小不超过300K。</li></ul><br/>'
},{
xtype : 'label',
fieldLabel:'',
html: '<ul><li>3、图片默认分辨率为102*125。</li></ul><br/>'
}] ,
buttons:[{
xtype : 'button',
fieldLabel:'',
text:'上传头像',
handler: function(){
var file_path = Ext.getCmp('upload').getValue();
var str = file_path.substr(file_path.lastIndexOf('.')+1,file_path.length);
if(str!='JPG'&&str!='jpg'){
Ext.Msg.alert('错误', "上传的图像只能是jpg格式!");
return false;
}
if(imageform.getForm().isValid()){
imageform.getForm().submit({
url: '/SchoolManageSystem/upLoadAvatar.do',
success:function(form, action){
var isSuc = action.result.success;
var message = action.result.message;
var image_url = "/SchoolManageSystem"+ action.result.avatarurl;
if(isSuc=='true'){
Ext.Msg.alert('消息', message);
}else{
Ext.Msg.alert('错误', message);
}
Ext.getCmp("browseImage").getEl().dom.src=image_url;
},
failure:function(form, action){
var isSuc = action.result.success;
var message = action.result.message;
if(isSuc=='true'){
Ext.Msg.alert('消息', message);
}else{
Ext.Msg.alert('错误', message);
}
Ext.getCmp("browseImage").getEl().dom.src=image_url;
}
});
}
}
}
]
}]
}]
}]
}]
})
struts2的配置文件:
<package name="default" extends="json-default">
<action name="upLoadAvatar" class="cn.action.UserinfoAction" method="upLoadAvatar">
<result name="success" type="json">
<param name="ContentType">text/html</param>
<param name="includeProperties">avatarurl,message,success</param>
</result>
</action>
</package>
Java代码如:
private File upload;
private String avatarurl;
private String uploadContentType;
private String uploadFileName;
。。。。
/**
* 上传用户头像
* @return
*/
public String upLoadAvatar() {
int BUFFER_SIZE = 16 * 1024;
InputStream in = null ;
OutputStream out = null ;
if(upload==null){
message = "文件不能为空";
avatarurl = "/images/login/photo-head.jpg";
success = false;
return SUCCESS;
}
long length = Math.round(upload.length()/1024);//文件大小,kb单位
if(length>600){
message = "文件大小超过300K的限制";
avatarurl = "/images/login/photo-head.jpg";
success = false;
return SUCCESS;
}
Map session = ActionContext.getContext().getSession();
int school_id = ( (UserInformation)session.get("ui")).getSchool_id();
int type = ( (UserInformation)session.get("ui")).getType();
String username = ( (UserInformation)session.get("ui")).getUsername();
int year = Calendar.getInstance().getTime().getYear()+1900;
String uploaddir = File.separator+"upload"+File.separator+school_id+File.separator+year+File.separator;
String relative = "/upload/"+school_id+"/"+year+"/";
Long timestamp = System.currentTimeMillis();
String imageName = username + "_" + timestamp+".jpg";
String realaddr = ServletActionContext.getServletContext().getRealPath(uploaddir);
File saveFile = new File(new File(realaddr), imageName);
if (!saveFile.getParentFile().exists()) {
saveFile.getParentFile().mkdirs();
}
try {
in = new BufferedInputStream( new FileInputStream(upload), BUFFER_SIZE );
out = new BufferedOutputStream( new FileOutputStream(saveFile), BUFFER_SIZE );
byte [] buffer = new byte [ BUFFER_SIZE ];
int len = 0;
while ((len = in.read(buffer)) > 0) {
out.write(buffer, 0, len);
out.flush();
}
。。。。其他的业务代码省略
success = true;
message = "上传成功";
} catch (IOException e) {
e.printStackTrace();
}finally {
if ( null != in) {
try {
in.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if ( null != out) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return SUCCESS;
}
这样前台就可以传递图片到后台了,其实传递其他的文件也是相同的道理。
图片效果:
- 描述: result
- 大小: 54.2 KB
分享到:
相关推荐
网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。
在"ExtJS+Struts2"的组合中,前端使用ExtJS进行界面设计和用户交互处理。例如,"简单增删改"功能通常会涉及到ExtJS的Grid Panel组件,它能展示数据表格,支持行操作,如添加新记录、删除现有记录以及编辑单元格内容...
标题"能运行的ExtJs+Struts2文件上传"表明这是一个实现了文件上传功能的示例项目。在ExtJs中,可以利用其提供的FileInput组件创建一个文件选择器,用户可以选择文件并提交到服务器。Struts2则在服务器端处理文件上传...
ExtJs + Struts2 + JSON 是一种常见的前端与后端数据交互的技术组合,常用于构建富客户端应用。这里我们详细探讨一下这三个技术组件以及它们如何协同工作。 首先,ExtJs 是一个JavaScript库,用于创建复杂的、用户...
extjs+struts案例 extjs+struts案例
ExtJS + Struts2 + Hibernate + JSON 登录程序是一个典型的Web开发示例,结合了前端JavaScript框架、MVC框架、持久层框架以及数据传输格式,实现了用户登录功能的前后端交互。下面将详细阐述这些技术及其在登录程序...
Extjs+struts实现文件上传 使用说明中的UploadfileAction.java中的代码要拷贝到一个JSP文件中并将url: '/rsgl/uploadfile.do',改为url: '/rsgl/jspcos.jsp',才可以正常上传
ExtJS和Struts2是两种在Web开发中广泛使用的开源技术。ExtJS是一个JavaScript库,提供了丰富的用户界面组件,如数据网格、图表、表单等,用于构建富客户端应用程序。Struts2则是一个基于MVC设计模式的Java Web框架,...
java版ExtJs+struts2做的OA对于java开发者和学习者来说是很不错的学习资料
在IT行业中,构建Web应用程序是一项常见的任务,而`ExtJS`、`Struts2`和`JSON`是其中的关键技术,常被用来创建交互性强、功能丰富的用户界面和高效的服务器通信。下面将详细阐述这三个技术及其结合使用的情况。 ...
在本项目中,"extjs+struts2+mysql" 的组合被用来构建一个基础的Web应用程序,主要功能包括增、删、改、查。这是一个常见的技术栈,用于开发交互性强、用户界面友好的企业级应用。下面我们将详细讨论这三个关键技术...
ExtJs+struts2+hibernate+spring的图书管理系统,可作为毕业设计使用,供大家一起参考学习为。
1. **通信方式**:ExtJS通常使用Ajax技术与服务器进行异步通信,而Struts2提供了JSON结果类型,两者可以无缝对接。通过ExtJS的Ajax请求发送数据到Struts2的Action,Action处理完业务逻辑后,返回JSON格式的数据,...
通常,ExtJS的库文件会被放置在项目的静态资源目录下,如`/WEB-INF/resources/js/`,而Struts的配置文件如struts.xml则位于`/WEB-INF/`目录中。 在Struts中,我们定义Action类来处理用户的请求。例如,可以创建一个...
【图书管理系统源码(ExtJs+struts2+hibernate+spring)】是一个基于Web的软件项目,它展示了如何整合多种技术来构建一个实际的应用系统。这个管理系统使用了前端框架ExtJs,后端MVC框架Struts2,持久层框架...
在本文中,我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况,例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...
ExtJS、Struts2和JDBC是Web开发中常见的技术栈,它们的结合可以构建功能丰富的交互式Web应用。这个小例子提供了一个基于这些技术的简单增删改查(CRUD)操作的实现,对于初学者来说是一个很好的学习资源。 ExtJS是...
在"extjs+struts1图书管理系统"中,开发者可能会遇到一些关键技术点,例如如何利用ExtJS组件构建动态表格,如何使用Struts1的ActionForm和ActionMapping进行数据处理,以及如何通过Ajax技术实现前后端异步通信等。...
《基于ExtJS+Struts+MySQL的考勤系统详解》 在信息技术日益发达的今天,企业对于高效管理的需求越来越强烈,考勤系统作为企业管理的重要组成部分,扮演着至关重要的角色。本篇文章将深入探讨一个由ExtJS、Struts和...
6. **Ajax通信**:ExtJS的Ajax组件如AjaxProxy与Struts2的Action进行交互,实现异步数据加载和提交,提高用户体验。 7. **MVC设计模式**:Struts2中的Action、Model、View三部分分别对应控制器、模型和视图,与...