- 浏览: 916494 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (498)
- J2EE (52)
- 数据库 (17)
- java基础 (43)
- web技术 (19)
- 程序设计 (6)
- 操作系统 (18)
- IT资讯 (7)
- 我的IT生活 (12)
- 学习笔记 (9)
- Jquery (25)
- JavaScript (18)
- spring (40)
- Hibernate (12)
- Struts (10)
- YUI (2)
- Extjs (22)
- .net (0)
- Eclipse (10)
- 社会主义 (2)
- 服务器 (9)
- CSS (8)
- 网络安全 (16)
- 版本控制 (9)
- PHP (2)
- Oracle (42)
- SQL server (1)
- Mysql (11)
- 项目管理 (3)
- 开发工具使用 (10)
- SQL语句 (7)
- Perl (0)
- Shell (6)
- 漏洞 (4)
- ibatis (5)
- hacker (2)
- SQL注入 (6)
- Hacker工具 (2)
- 入侵和渗透 (7)
- 插件/组件 (2)
- 最爱开源 (5)
- 常用软件 (2)
- DOS (1)
- HTML (2)
- Android (9)
- CMS (1)
- portal (8)
- Linux (7)
- OSGI (1)
- Mina (5)
- maven (2)
- hadoop (7)
- twitter storm (2)
- sap hana (0)
- OAuth (0)
- RESTful (1)
- Nginx (4)
- flex (1)
- Dubbo (1)
- redis (1)
- springMVC (1)
- node.js (1)
- solr (2)
- Flume (1)
- MongoDB (2)
- ElasticSearch (1)
最新评论
-
M_drm:
请问要怎么设置浏览器才不报没权限呢?
用JS在页面调用本地可执行文件的方法(ACTIVEX) -
Alexniver:
官方文档。When importing data into I ...
mysql导入数据过慢 解决方法 -
camelwoo:
我记得 Criteria 可以做连接查询与子查询,也可以做分页 ...
Hibernate总结篇二 -
zhenglongfei:
楼主如果SubKeyName 这个节点不存在,怎么办??怎么用 ...
Java操作注册表 -
yxx676229549:
用log4j 2 了
logback
前阵子项目里面需要实现文件上传的功能,前后换了包括我在内的三个人来搞,搞了很长时间才搞好,因为一些小问题耽误了很长时间。趁着手热,写下来贴出来给大家分享,希望查到本文的人可以少走一些弯路。
项目中用到的技术是ExtJs3.3和SSH等,与文件上传相关的主要是Ext和Struts2。
最开始是一同事搞的,使用了Ext示例包里的FileUploadField,需要在页面中引用两个文件:/ext/examples/ux/fileuploadfield/css/fileuploadfield.css和/ext/examples/ux/fileuploadfield/FileUploadField.js。
废话少说,直接上代码,中间各种曲折的过程都省略。文件上传的弹框是一个Window,里面内嵌了一个FormPanel。
然后,在后台处理的action里面,无论你返回什么值都可以,SUCCESS、NONE、甚至自定义的一个字符串都行。注意这里所说的“返回”是指action里面的处理函数自身的返回,我相信你懂的……。只要你从action向前台返回的json数据中,不包含{success:false}这个值,success:true也可以省略不写,Ext都会认为文件上传操作成功,即会执行submit方法中success属性定义的回调函数。
struts配置文件中的部分内容如下:
注意ContentType要设定为text/html类型,否则浏览器不能正确处理,可能会将服务器端的响应作为文件提示用户进行下载。要想给前台正确响应数据,可以有多种方法(笔者目前发现了三种):
1、可以直接指定action返回json格式的数据,如上面这样result name="success"的返回类型所示。如果采用这种方式,最好在相应的Action类里包含三个属性:success,filename和msg。其中success的类型可以是String,也可以是boolean,另外两个属性是String类型的。如果Action的方法返回的时候,success的值是false,就可以表示文件上传失败,然后msg属性就可以指明文件上传失败的原因;filename可以用来保存文件的名字。
注意无论哪种方式,contentType的类型一定要设置为text/html,否则浏览器可能会把服务器端的响应当成文件,提示让你下载。
2、可以在一个文本文件里包含一个json格式的字符串,用作服务器端对客户端的反应。如上面result name="test1"时的配置所示。其中指定了Action的返回值为”test1”时,向客户端返回test.jsp页面里包含的内容,而这个页面里面可能只写了一句:{success:true},就相当于服务器端向客户端返回了这个json响应。
不过这种方法可能会比较死,不如第一种方法灵活方便,尤其是需要考虑文件上传(或上传后的解析)失败的情况,错误信息不太方便返回。
3、可以直接在Action里面,使用HttpServletResponse对客户端进行响应。例如专门写一个写客户端响应的函数如下:
这样,把要返回给客户端的json内容按照类似{success:true}的标准格式传给sendMsg函数即可。笔者建议在此处调用Writer的flush和notify函数,sendMsg函数发送的数据会立即发送到客户端。所以,你的Action的返回值就可以随心所欲了,即使是INPUT或者ERROR也没有关系。跟第一种方法一样灵活,不过还是不如第一种方法方便。
是不是很简单?其实第一个同事搞的时候,就差不多搞好了,主要的问题应该就是他在success回调函数里使用了例子程序中的一个自定义函数msg,而没有把msg函数定义的代码引入进来,结果是即使文件上传成功,执行到success回调函数中的时候,也必然会报错,不能正常关闭上传对话框。
另外的原因是,项目中有一个判断“重复登录”的全局函数,使用了Ajax请求从服务器得到的response,用到了response.getResponseHeader()函数做判断。文件上传结束之后,这里总是报错,说是response中没有getResponseHeader()这个方法。最开始我搞的时候,没什么经验,没有太在意这个问题,以为这个跟文件上传无关,就把精力全部集中在解决文件上传本身之上了,结果耽误了很多时间。后来仔细查看API文档的时候,在FormPanel的基类、类Ext.form.BasicForm的描述中,发现了这样一句:
The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing aresponseText property in order to conform to the requirements of event handlers and callbacks.
即Ext使用FormPanel进行的文件上传时,Ajax请求返回的是一个伪响应(fake XMLHttpRequest),不能当做一般的response来使用。顿时茅塞顿开,修改了该全局函数,使得对于文件上传的response,跳过调用getResponseHeader()函数的判断。问题终于搞定!
血的教训!原来所有的Javascript文件中,只要有错误语法错误发生,就可能影响整个页面的所有js的执行啊!不过,在这整个过程中,对稍微Ext有了一点深入的认识,不再是刚进公司的时候,拿来个任务,直接参照着原有的代码进行简单增加和修改了。还了解了什么事Ajax,也学会了使用调试工具等等。
Ext还没有捂热,本人就听从项目需要,转arcgis了,可能还得学Flex等,学校期末也临近,要学的东西太多了……不废话咯~
后记:有人问,如果项目中每个ajax请求都会执行某方法,其中用到了getResponseHeader(),那么如何跳过文件上传的Ajax请求的判断呢?例如,我们的项目中Ajax请求返回的数据都是JSON格式的,我使用的方法是,判断如果response是JSON数据,就解析里面有没有我们所上传的文件(找名字即可),这样就可以判断这个ajax请求是不是用于文件上传的,然后决定是否跳过:
项目中用到的技术是ExtJs3.3和SSH等,与文件上传相关的主要是Ext和Struts2。
最开始是一同事搞的,使用了Ext示例包里的FileUploadField,需要在页面中引用两个文件:/ext/examples/ux/fileuploadfield/css/fileuploadfield.css和/ext/examples/ux/fileuploadfield/FileUploadField.js。
废话少说,直接上代码,中间各种曲折的过程都省略。文件上传的弹框是一个Window,里面内嵌了一个FormPanel。
var fp = new Ext.FormPanel( { renderTo : Ext.getBody(), fileUpload : true, width : 523, frame : true, autoHeight : true, bodyStyle : 'padding: 10px 10px 0 10px;', labelWidth : 50, defaults : { anchor : '95%', allowBlank : false, msgTarget : 'side' }, items : [ new Ext.form.FileUploadField( { buttonText: '浏览...', emptyText: '请选择一个xls文件', name : 'xlsFile', width : 500, buttonCfg: { width: 40, iconCls: 'upload-icon' } }) ], buttons : [ { text : '上传', handler : function() { if (fp.getForm().isValid()) { fp.getForm().submit( { method : 'post', url :'uploadEmployee.action',// 后台处理的action waitMsg : '操作处理中,请稍等...', waitTitle:'提示', success :function(fp,action){ Ext.Msg.alert('Success', 'The value of success is: "'+action.result.success+'" on the server'); excelWindow.destroy(); }, failure : function(fp, action) { var msg = action.response.responseText; var obj = Ext.decode( msg ); Ext.Msg.alert("提示", "Sorry,操作失败,原因:" + obj.message); excelWindow.destroy(); } }); } } }] }); var excelWindow = new Ext.Window( { renderTo : Ext.getBody(), closeAction : "hide", plain : true, width : 540, title : "批量导入员工信息", modal : true, items:[fp] }); excelWindow.show();
然后,在后台处理的action里面,无论你返回什么值都可以,SUCCESS、NONE、甚至自定义的一个字符串都行。注意这里所说的“返回”是指action里面的处理函数自身的返回,我相信你懂的……。只要你从action向前台返回的json数据中,不包含{success:false}这个值,success:true也可以省略不写,Ext都会认为文件上传操作成功,即会执行submit方法中success属性定义的回调函数。
struts配置文件中的部分内容如下:
<action name="uploadEmployee" class="uploadEmployeeService"> <interceptor-ref name="fileUpload"> <param name="maximumSize">10485760</param> <param name="allowedTypes">application/vnd.ms-excel</param> </interceptor-ref> <interceptor-ref name="defaultStack"/> <result name="success" type="json"> <param name="contentType">text/html</param> </result> <result name="test1">/employee/jsp/test.jsp <param name="contentType">text/html</param> </result> </action>
注意ContentType要设定为text/html类型,否则浏览器不能正确处理,可能会将服务器端的响应作为文件提示用户进行下载。要想给前台正确响应数据,可以有多种方法(笔者目前发现了三种):
1、可以直接指定action返回json格式的数据,如上面这样result name="success"的返回类型所示。如果采用这种方式,最好在相应的Action类里包含三个属性:success,filename和msg。其中success的类型可以是String,也可以是boolean,另外两个属性是String类型的。如果Action的方法返回的时候,success的值是false,就可以表示文件上传失败,然后msg属性就可以指明文件上传失败的原因;filename可以用来保存文件的名字。
注意无论哪种方式,contentType的类型一定要设置为text/html,否则浏览器可能会把服务器端的响应当成文件,提示让你下载。
2、可以在一个文本文件里包含一个json格式的字符串,用作服务器端对客户端的反应。如上面result name="test1"时的配置所示。其中指定了Action的返回值为”test1”时,向客户端返回test.jsp页面里包含的内容,而这个页面里面可能只写了一句:{success:true},就相当于服务器端向客户端返回了这个json响应。
不过这种方法可能会比较死,不如第一种方法灵活方便,尤其是需要考虑文件上传(或上传后的解析)失败的情况,错误信息不太方便返回。
3、可以直接在Action里面,使用HttpServletResponse对客户端进行响应。例如专门写一个写客户端响应的函数如下:
privatevoid sendMsg(String content) throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); response.setContentType("text/html"); response.getWriter().write(content); response.getWriter().flush(); response.getWriter().notify(); }
这样,把要返回给客户端的json内容按照类似{success:true}的标准格式传给sendMsg函数即可。笔者建议在此处调用Writer的flush和notify函数,sendMsg函数发送的数据会立即发送到客户端。所以,你的Action的返回值就可以随心所欲了,即使是INPUT或者ERROR也没有关系。跟第一种方法一样灵活,不过还是不如第一种方法方便。
是不是很简单?其实第一个同事搞的时候,就差不多搞好了,主要的问题应该就是他在success回调函数里使用了例子程序中的一个自定义函数msg,而没有把msg函数定义的代码引入进来,结果是即使文件上传成功,执行到success回调函数中的时候,也必然会报错,不能正常关闭上传对话框。
另外的原因是,项目中有一个判断“重复登录”的全局函数,使用了Ajax请求从服务器得到的response,用到了response.getResponseHeader()函数做判断。文件上传结束之后,这里总是报错,说是response中没有getResponseHeader()这个方法。最开始我搞的时候,没什么经验,没有太在意这个问题,以为这个跟文件上传无关,就把精力全部集中在解决文件上传本身之上了,结果耽误了很多时间。后来仔细查看API文档的时候,在FormPanel的基类、类Ext.form.BasicForm的描述中,发现了这样一句:
The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing aresponseText property in order to conform to the requirements of event handlers and callbacks.
即Ext使用FormPanel进行的文件上传时,Ajax请求返回的是一个伪响应(fake XMLHttpRequest),不能当做一般的response来使用。顿时茅塞顿开,修改了该全局函数,使得对于文件上传的response,跳过调用getResponseHeader()函数的判断。问题终于搞定!
血的教训!原来所有的Javascript文件中,只要有错误语法错误发生,就可能影响整个页面的所有js的执行啊!不过,在这整个过程中,对稍微Ext有了一点深入的认识,不再是刚进公司的时候,拿来个任务,直接参照着原有的代码进行简单增加和修改了。还了解了什么事Ajax,也学会了使用调试工具等等。
Ext还没有捂热,本人就听从项目需要,转arcgis了,可能还得学Flex等,学校期末也临近,要学的东西太多了……不废话咯~
后记:有人问,如果项目中每个ajax请求都会执行某方法,其中用到了getResponseHeader(),那么如何跳过文件上传的Ajax请求的判断呢?例如,我们的项目中Ajax请求返回的数据都是JSON格式的,我使用的方法是,判断如果response是JSON数据,就解析里面有没有我们所上传的文件(找名字即可),这样就可以判断这个ajax请求是不是用于文件上传的,然后决定是否跳过:
var t = response.responseText; if(t.charAt(0)=="{"){ if( Ext.decode(t).xlsFileFileName ){ return; } }
评论
1 楼
_魔妃
2012-06-18
我这EXTJS不是3.3的版本,对文件上传会有影响么?
还有/ext/examples/ux/fileuploadfield/css/fileuploadfield.css和/ext/examples/ux/fileuploadfield/FileUploadField.js缺少了资料呢,有其它办法没?
还有/ext/examples/ux/fileuploadfield/css/fileuploadfield.css和/ext/examples/ux/fileuploadfield/FileUploadField.js缺少了资料呢,有其它办法没?
发表评论
-
UI组件:ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
2013-05-16 13:43 3976UI组件:ext、JqueryEasyUI、miniui、dh ... -
JavaScript大牛:Douglas Crockford
2013-03-28 16:02 850JavaScript大牛:Douglas Crockford ... -
Extjs 中的cookie设置
2012-04-25 17:34 2124发现Extjs中有两个cookie 其一:设置cookie如 ... -
ExtJS column布局后labelField无法显示的问题
2012-04-18 10:43 1989第一次用Extjs的column布局时遇见了很多问题,记录下来 ... -
<转>Extjs中的提示信息用法
2012-04-18 09:43 5012ExtJS.form中msgTarget Ext表单提示 ... -
Extjs表单组件及属性
2012-04-18 09:34 1348Ext.form.Action 配置项: ... -
ext2.0 Ext.MessageBox.confirm 值传递
2012-04-11 10:14 1316function showEditPanel(mID){ ... -
ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法
2012-03-28 16:12 1830小菜使用如下代码生成T ... -
ExtJS 开发总结
2012-03-17 23:19 944http://nything.iteye.com/blog/4 ... -
Ext Theme Builder /Ext 皮肤定制
2011-12-29 14:52 1793Spket 定制皮肤功能: spket 支持定制EXT皮肤功能 ... -
ExtJS Button的事件和方法定义
2011-12-28 12:24 15315ExtJS Button的事件和方法定义: Ext.onR ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-12-27 16:30 2946在使用<input id="file_upl& ... -
ExtJS专题-FormPanel(1)
2011-12-14 14:56 1625OK,前面我们已经学过 ... -
ext TreePanel使用
2011-11-25 21:01 17751. 首先还是主要的显示页面tree.html,这里有两个地方 ... -
ExtJS学习笔记 layout的9种样式风格总结
2011-11-15 14:06 985ExtJS学习笔记 layout的9种样式风格总结 http ... -
extjs中TreeLoader加参数
2011-09-14 14:17 5232/** * 重新加载数据 * @param pa ... -
ExtJS中表单验证使用自定义vtype(两次输入密码重复)示例
2011-02-24 11:28 5218在ExtJS中,使用了四种自定义,分别是'alpha',alp ... -
EXT组件xtype简介
2011-01-04 11:56 1068http://wxg6203.iteye.com/blog/6 ... -
Ext之级联Combox
2010-11-21 01:43 1381/** * 定义store,在baseParams中定义参 ... -
图文详解Ext常见开发工具的安装使用
2010-10-11 21:23 1084图文详解Ext常见开发工具的安装使用 http://www. ...
相关推荐
《EXT+STRUTS2构建的学生信息管理系统详解》 在当今信息化社会,高效的数据管理和信息处理是各类组织不可或缺的能力。本文将深入探讨基于EXT和STRUTS2技术框架构建的学生信息管理系统,阐述其核心功能、架构设计...
《基于Ext+Struts2的学生成绩管理系统详解》 在现代信息技术的推动下,教育领域的信息化管理已经成为不可或缺的一部分。学生成绩管理系统的构建,旨在提高教学管理效率,减轻教师的工作负担,为教学决策提供数据...
《基于EXT、Spring、Hibernate和Struts的人力资源管理系统详解》 在IT行业中,构建高效、易维护的企业级应用是一项重要任务。本文将深入探讨一个典型的应用架构——基于EXT、Spring、Hibernate和Struts的人力资源...
1. **配置Struts 2插件**:在Liferay的`portal-ext.properties`文件中启用Struts 2插件,例如`struts.action.extension=action` 2. **创建Struts 2 Action类**:继承Liferay的`...
《基于ExtJS、DWR、Hibernate和Struts的进销存管理系统详解》 在现代企业信息化建设中,进销存管理系统的应用至关重要,它能够有效整合企业的采购、销售和库存等核心业务流程,提高运营效率。本文将详细介绍一个...
2. **Struts2 (SSH)**:Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架。它简化了处理HTTP请求、管理页面流程以及与后端数据源交互的过程。在这个小例子中,Struts2作为控制器,处理用户通过...
【标题】: "一个基于Struts和Ext的JSP文件上传网盘系统" 【描述】: 本项目是一个实现文件上传和管理功能的JSP网盘应用,它结合了Struts框架与Ext JS前端库来构建用户界面和处理业务逻辑。Struts作为一个成熟的MVC...
这篇详解将深入介绍这些关键技术及其在物流管理系统的应用。 首先,ExtJS是一个强大的JavaScript库,专用于构建富客户端应用程序。它提供了丰富的组件库,如表格、面板、窗口、菜单等,使得开发者可以轻松创建功能...
1. **源代码目录**:分为前端(可能包含`extjs`库及自定义组件)和后端(可能包含`struts2`、`hibernate`相关的Java类,以及配置文件)。 2. **数据库脚本**:SQL文件用于创建和初始化物流管理系统的数据库结构。 3....
系统采用Ext技术和SSH(Spring、Struts和Hibernate)框架进行构建。"源码.zip"暗示了提供的是该项目的源代码。 【Ext技术详解】 Ext是Ext JS的简称,它是一款基于JavaScript的开源UI库,用于构建富互联网应用程序...
《龙门物流管理系统(Ext+SSH)详解》 在IT行业中,物流管理系统的开发与应用是企业信息化建设的重要组成部分。本文将深入探讨一个名为“龙门物流管理系统”的案例,该系统采用了Ext和SSH两种技术进行构建。这两种...
《图书管理系统基于Struts、Hibernate、Spring和EXT的实现详解》 图书管理系统是软件工程领域中常见的实践项目,尤其在教育和技术行业中广泛使用。本系统采用经典的SSH2(Struts2、Hibernate、Spring)框架结合EXT....
《图书管理系统基于Struts+Hibernate+Spring+Ext的实现详解》 图书管理系统是软件工程领域中常见的项目,尤其在教学和实践中,它常被用作Java Web开发的示例。本系统采用Struts、Hibernate、Spring和Ext这四大技术...
### Struts2+Json+ExtJS分页技术详解 #### 一、技术背景与概述 在Web开发领域,实现高效的数据展示与交互是至关重要的。本文档将介绍如何使用Struts2框架结合JSON数据格式以及ExtJS前端库来实现动态分页功能。此...
为了方便ajax调用传输数据,在struts2中加入的json插件用来做对象的序列化和反序列化,json插件的下载地址 http://code.google.com/p/jsonplugin/ 1. 下载json插件包,将jar包拷贝到WEB-INF/lib目录 注:struts2...
### Ext_Js分页显示案例详解 #### 一、引言 在Web开发领域,Ext_Js(简称ExtJS)是一种强大的JavaScript库,用于构建复杂的客户端应用。它提供了一套丰富的UI组件,使得开发者能够轻松地创建美观且功能强大的用户...