查看: 14457|回复: 1

[精华] Spring MVC3联合ExtJS 4实现文件上传

[复制链接]
论坛徽章:
63
2010广州亚运会纪念徽章:台球
日期:2010-10-18 12:43:48茶鸡蛋
日期:2013-01-09 10:59:002013年新春福章
日期:2013-02-25 14:51:24奥运会纪念徽章:帆船
日期:2013-04-02 17:07:052013年新春福章
日期:2013-04-08 17:42:48奥运纪念徽章
日期:2013-07-18 13:55:12优秀写手
日期:2013-12-18 09:29:10马上有车
日期:2014-03-20 16:13:24马上有房
日期:2014-03-20 16:14:11马上有钱
日期:2014-03-20 16:14:11
发表于 2012-10-8 20:18 | 显示全部楼层 |阅读模式
本帖最后由 chszs 于 2012-10-8 20:25 编辑

《Spring MVC3联合ExtJS 4实现文件上传》

【版权声明】本文属于原创,版权归作者chszs所有,使用源码无任何限制,但转载文章需经作者同意。

本文讲述了怎样使用ExtJS 4框架,结合Spring MVC 3开发一个带上传功能的简单Web应用。以这个例子说明Spring MVC 3结合ExtJS 4框架的整个开发过程。

下面让我们开始吧!

一、准备工作
预准备的工具及软件有:
1. Eclipse IDE:我使用Eclipse JEE 4.2SR1版,即eclipse-jee-juno-SR1-win32-x86_64.zip
2. JDK 7:我使用JDK 7u5版,即jdk-7u5-windows-x64.exe
3. ExtJS 4.1.1a,下载地址:http://cdn.sencha.com/ext-4.1.1a-gpl.zip
4. Spring Framework:我使用Spring Framework 3.1.2版,即spring-framework-3.1.2.RELEASE-with-docs.zip
5. Apache Commons FileUpload组件:我使用commons-fileupload-1.2.2-bin.zip
下载地址:http://mirrors.tuna.tsinghua.edu ... pload-1.2.2-bin.zip
6. Apache Commons IO组件:我使用commons-io-2.4-bin.zip
下载地址:http://apache.etoak.com//commons ... mons-io-2.4-bin.zip
7. Apache Commons Logging组件:我使用commons-logging-1.1.1.jar

二、项目所需的类库

项目所需的类库如下图所示:
image001.jpg

三、创建项目
1. 在Eclipse新建动态Web项目,项目名为:ExtDemo。

2. 编写源码
在src新建com.ch.controller包,在包内创建类FileUploadController.ja va,内容如下:
  1. package com.ch.controller;

  2. import java.io.File;
  3. import java.io.FileOutputStream;
  4. import java.io.IOException;
  5. import java.io.InputStream;
  6. import java.io.OutputStream;

  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.validation.BindingResult;
  9. import org.springframework.validation.ObjectError;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RequestMethod;
  12. import org.springframework.web.bind.annotation.ResponseBody;
  13. import org.springframework.web.multipart.MultipartFile;

  14. import com.ch.model.ExtJSFormResult;
  15. import com.ch.model.FileUploadBean;

  16. @Controller
  17. @RequestMapping(value = "/upload.action")
  18. public class FileUploadController {
  19.    
  20.     /**
  21.      * 上传路径
  22.      */
  23.     private String uploadFolderPath = "D:/tmp/";

  24.     @RequestMapping(method = RequestMethod.POST)
  25.     public @ResponseBody
  26.     String create(FileUploadBean uploadItem, BindingResult result) throws IOException {

  27.         ExtJSFormResult extjsFormResult = new ExtJSFormResult();

  28.         if (result.hasErrors()) {
  29.             for (ObjectError error : result.getAllErrors()) {
  30.                 System.err.println("Error: " + error.getCode() + " - "
  31.                         + error.getDefaultMessage());
  32.             }

  33.             // 设置ExtJS返回 - error
  34.             extjsFormResult.setSuccess(false);

  35.             return extjsFormResult.toString();
  36.         }

  37.         // Some type of file processing...
  38.         MultipartFile file = uploadItem.getFile();
  39.         String fileName = null;
  40.         InputStream inputStream = null;
  41.         OutputStream outputStream = null;
  42.         if(file.getSize()>0){
  43.         inputStream = file.getInputStream();
  44.         if(file.getSize()>100000){
  45.              System.out.println("File Size:::" + file.getSize());
  46.              extjsFormResult.setSuccess(false);
  47.             return extjsFormResult.toString();
  48.         }
  49.         System.out.println("size::" + file.getSize());
  50.            
  51.             File newFile = new File(uploadFolderPath + "/images/");
  52.             if(!newFile.exists()){
  53.               newFile.mkdirs();
  54.             }
  55.             fileName = uploadFolderPath + "/images/" + file.getOriginalFilename();
  56.            
  57.             outputStream = new FileOutputStream(fileName);
  58.             System.out.println("fileName:" + file.getOriginalFilename());

  59.             int readBytes = 0;
  60.             byte[] buffer = new byte[10000];
  61.             while ((readBytes = inputStream.read(buffer, 0, 10000)) != -1) {
  62.                     outputStream.write(buffer, 0, readBytes);
  63.             }
  64.             outputStream.close();
  65.             inputStream.close();
  66.         }

  67.         // 设置ExtJS返回 - sucsess
  68.         extjsFormResult.setSuccess(true);

  69.         return extjsFormResult.toString();
  70.     }

  71. }
复制代码

在src新建com.ch.model包,在包内创建类ExtJSFormResult.ja va,内容如下:
  1. package com.ch.model;

  2. public class ExtJSFormResult {

  3.     private boolean success;

  4.     public boolean isSuccess() {
  5.         return success;
  6.     }

  7.     public void setSuccess(boolean success) {
  8.         this.success = success;
  9.     }

  10.     public String toString() {
  11.         return "{success:" + this.success + "}";
  12.     }
  13. }

复制代码

在com.ch.model包创建类FileUploadBean.ja va,内容如下:
  1. package com.ch.model;

  2. import org.springframework.web.multipart.commons.CommonsMultipartFile;

  3. public class FileUploadBean {

  4.     private CommonsMultipartFile file;

  5.     public CommonsMultipartFile getFile() {
  6.         return file;
  7.     }

  8.     public void setFile(CommonsMultipartFile file) {
  9.         this.file = file;
  10.     }
  11. }
复制代码

3. 编写Web层代码

把ext-4.1.1a-gpl.zip中的resources目录和ext-all.js文件复制到WebContent目录。其中,ext-all.js文件复制到WebContent\js目录。

在WebContent编写index.jsp文件,内容如下:
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <title>ExtJS Demo</title>
  7.     <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
  8.     <script type="text/javascript" src="js/ext-all.js"></script>
  9.     <script type="text/javascript" src="js/file-upload.js"></script>
  10. </head>
  11. <body>
  12.     <p>请选择文件进行上传:</p>
  13.     <div id="fi-form" style="padding:25px;"></div>
  14. </body>
  15. </html>
复制代码

在js目录下编写file-upload.js文件,内容如下:
  1. Ext.onReady(function() {

  2.     Ext.create('Ext.form.Panel', {
  3.         title : '文件上传',
  4.         width : 400,
  5.         bodyPadding : 10,
  6.         frame : true,
  7.         renderTo : 'fi-form',
  8.         items : [ {
  9.             xtype : 'filefield',
  10.             name : '文件',
  11.             fieldLabel : 'File',
  12.             labelWidth : 50,
  13.             msgTarget : 'side',
  14.             allowBlank : false,
  15.             anchor : '100%',
  16.             buttonText : '请选择文件...'
  17.         } ],

  18.         buttons : [ {
  19.             text : '上传',
  20.             handler : function() {
  21.                 var form = this.up('form').getForm();
  22.                 if (form.isValid()) {
  23.                     form.submit({
  24.                         url : 'upload.action',
  25.                         waitMsg : 'Uploading your file...',
  26.                         success : function(fp, o) {
  27.                             Ext.Msg.alert('Success',
  28.                                     'Your file has been uploaded.');
  29.                         }
  30.                     });
  31.                 }
  32.             }
  33.         } ]
  34.     });

  35. });

复制代码

4. 编写配置文件

在WebContent\WEB-INF\目录新建spring目录,在spring目录编写app-config.xml文件:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
  4.     xsi:schemaLocation="
  5. http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
  6. http://www.springframework.org/schema/context http://www.springframework.org/s ... ing-context-3.0.xsd">

  7.     <!-- Activates various annotations to be detected in bean classes -->
  8.     <context:annotation-config />

  9.     <!-- Scans the classpath of this application for @Components to deploy as
  10.         beans -->
  11.     <context:component-scan base-package="com.ch" />

  12.     <!-- Configures Spring MVC -->
  13.     <import resource="mvc-config.xml" />

  14.     <!-- Configure the multipart resolver -->
  15.     <bean id="multipartResolver"
  16.         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  17.         <!-- one of the properties available; the maximum file size in bytes -->
  18.         <property name="maxUploadSize" value="100000" />
  19.     </bean>

  20. </beans>
复制代码

在spring目录编写mvc-config.xml文件:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
  4.     xsi:schemaLocation="
  5. http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
  6. http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

  7.     <!-- Configures the @Controller programming model -->
  8.     <mvc:annotation-driven />

  9.     <!-- Resolves view names to protected .jsp resources within the /WEB-INF/views
  10.         directory -->
  11.     <bean
  12.         class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  13.         <property name="prefix" value="/WEB-INF/" />
  14.         <property name="suffix" value=".jsp" />
  15.     </bean>

  16. </beans>

复制代码

修改web.xml配置文件,内容如下:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.     xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  5.     id="ExtDemo" version="3.0">

  6.     <display-name>ExtDemo</display-name>

  7.     <welcome-file-list>
  8.         <welcome-file>index.jsp</welcome-file>
  9.     </welcome-file-list>

  10.     <servlet>
  11.         <servlet-name>extjs-spring</servlet-name>
  12.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  13.         <init-param>
  14.             <param-name>contextConfigLocation</param-name>
  15.             <param-value>/WEB-INF/spring/app-config.xml</param-value>
  16.         </init-param>
  17.         <load-on-startup>1</load-on-startup>
  18.     </servlet>

  19.     <servlet-mapping>
  20.         <servlet-name>extjs-spring</servlet-name>
  21.         <url-pattern>*.action</url-pattern>
  22.     </servlet-mapping>
  23. </web-app>

复制代码

至此,项目开发完毕。

项目结构如图所示:
image003.jpg


项目源码我放到了GitHub,可以从GitHub下载:https://github.com/chszs/ExtDemo

四、项目的部署和运行

项目部署后,运行如图所示:
image005.jpg

选择文件进行上传后,输出:
image007.jpg
认证徽章
论坛徽章:
277
马上加薪
日期:2014-02-19 11:55:14马上有对象
日期:2014-02-19 11:55:14马上有钱
日期:2014-02-19 11:55:14马上有房
日期:2014-02-19 11:55:14马上有车
日期:2014-02-19 11:55:14马上有车
日期:2014-02-18 16:41:112014年新春福章
日期:2014-02-18 16:41:11版主9段
日期:2012-11-25 02:21:03ITPUB年度最佳版主
日期:2014-02-19 10:05:27现任管理团队成员
日期:2011-05-07 01:45:08
发表于 2012-10-9 12:40 | 显示全部楼层
好文!

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

TOP技术积分榜 社区积分榜 徽章 团队 统计 知识索引树 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 
京ICP备09055130号-4  北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表