`
zpball
  • 浏览: 916494 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

详解Ext + Struts2 文件上传

ext 
阅读更多
前阵子项目里面需要实现文件上传的功能,前后换了包括我在内的三个人来搞,搞了很长时间才搞好,因为一些小问题耽误了很长时间。趁着手热,写下来贴出来给大家分享,希望查到本文的人可以少走一些弯路。
    项目中用到的技术是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+struts2的学生信息管理系统

    《EXT+STRUTS2构建的学生信息管理系统详解》 在当今信息化社会,高效的数据管理和信息处理是各类组织不可或缺的能力。本文将深入探讨基于EXT和STRUTS2技术框架构建的学生信息管理系统,阐述其核心功能、架构设计...

    Ext+Struts2的学生成绩管理系统

    《基于Ext+Struts2的学生成绩管理系统详解》 在现代信息技术的推动下,教育领域的信息化管理已经成为不可或缺的一部分。学生成绩管理系统的构建,旨在提高教学管理效率,减轻教师的工作负担,为教学决策提供数据...

    ext+spring+hibernat+struts 人力资源管理系统

    《基于EXT、Spring、Hibernate和Struts的人力资源管理系统详解》 在IT行业中,构建高效、易维护的企业级应用是一项重要任务。本文将深入探讨一个典型的应用架构——基于EXT、Spring、Hibernate和Struts的人力资源...

    liferay6+struts2集成项目

    1. **配置Struts 2插件**:在Liferay的`portal-ext.properties`文件中启用Struts 2插件,例如`struts.action.extension=action` 2. **创建Struts 2 Action类**:继承Liferay的`...

    Ext+dwr+Hibernate+struts进销存管理系统终于完工(含源码)

    《基于ExtJS、DWR、Hibernate和Struts的进销存管理系统详解》 在现代企业信息化建设中,进销存管理系统的应用至关重要,它能够有效整合企业的采购、销售和库存等核心业务流程,提高运营效率。本文将详细介绍一个...

    Ext+ssh 实现增删改查小例子

    2. **Struts2 (SSH)**:Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架。它简化了处理HTTP请求、管理页面流程以及与后端数据源交互的过程。在这个小例子中,Struts2作为控制器,处理用户通过...

    一个JSP网盘(运用Struts+Ext上传技术)

    【标题】: "一个基于Struts和Ext的JSP文件上传网盘系统" 【描述】: 本项目是一个实现文件上传和管理功能的JSP网盘应用,它结合了Struts框架与Ext JS前端库来构建用户界面和处理业务逻辑。Struts作为一个成熟的MVC...

    龙门物流管理系统(Ext+SSH)130221.rar

    这篇详解将深入介绍这些关键技术及其在物流管理系统的应用。 首先,ExtJS是一个强大的JavaScript库,专用于构建富客户端应用程序。它提供了丰富的组件库,如表格、面板、窗口、菜单等,使得开发者可以轻松创建功能...

    龙门物流管理系统(Ext+SSH).zip

    1. **源代码目录**:分为前端(可能包含`extjs`库及自定义组件)和后端(可能包含`struts2`、`hibernate`相关的Java类,以及配置文件)。 2. **数据库脚本**:SQL文件用于创建和初始化物流管理系统的数据库结构。 3....

    毕业设计论文-IT计算机-龙门物流管理系统(Ext+SSH)-源码.zip

    系统采用Ext技术和SSH(Spring、Struts和Hibernate)框架进行构建。"源码.zip"暗示了提供的是该项目的源代码。 【Ext技术详解】 Ext是Ext JS的简称,它是一款基于JavaScript的开源UI库,用于构建富互联网应用程序...

    龙门物流管理系统(Ext+SSH).zip.zip

    《龙门物流管理系统(Ext+SSH)详解》 在IT行业中,物流管理系统的开发与应用是企业信息化建设的重要组成部分。本文将深入探讨一个名为“龙门物流管理系统”的案例,该系统采用了Ext和SSH两种技术进行构建。这两种...

    图书管理系统(struts+hibernate+spring+ext).zip

    《图书管理系统基于Struts、Hibernate、Spring和EXT的实现详解》 图书管理系统是软件工程领域中常见的实践项目,尤其在教育和技术行业中广泛使用。本系统采用经典的SSH2(Struts2、Hibernate、Spring)框架结合EXT....

    图书管理系统(struts+hibernate+spring+ext)130221.zip

    《图书管理系统基于Struts+Hibernate+Spring+Ext的实现详解》 图书管理系统是软件工程领域中常见的项目,尤其在教学和实践中,它常被用作Java Web开发的示例。本系统采用Struts、Hibernate、Spring和Ext这四大技术...

    Struts2+Json+ExtJS分页

    ### Struts2+Json+ExtJS分页技术详解 #### 一、技术背景与概述 在Web开发领域,实现高效的数据展示与交互是至关重要的。本文档将介绍如何使用Struts2框架结合JSON数据格式以及ExtJS前端库来实现动态分页功能。此...

    struts2的json插件配置详解(附demo)

    为了方便ajax调用传输数据,在struts2中加入的json插件用来做对象的序列化和反序列化,json插件的下载地址 http://code.google.com/p/jsonplugin/ 1. 下载json插件包,将jar包拷贝到WEB-INF/lib目录 注:struts2...

    Ext_Js分页显示案例详解

    ### Ext_Js分页显示案例详解 #### 一、引言 在Web开发领域,Ext_Js(简称ExtJS)是一种强大的JavaScript库,用于构建复杂的客户端应用。它提供了一套丰富的UI组件,使得开发者能够轻松地创建美观且功能强大的用户...

Global site tag (gtag.js) - Google Analytics