SSM整合+WebUpload使用（spring+springmvc+mybatis+maven）

 

SSM框架整合以及webupload的集成與使用

在項目中最近用到了webupload.js，也方方面面遇到了不少問題，比如上傳文件前對表單參數校驗，當校驗失敗不予提交，及在文件上傳成功后，選擇同名文件，則不會顯示文件，但可以提交表單。外加一直沒有對SSM框架整合沒有整理過，借此機會做以學習筆記。遇到的具體問題會在代碼注釋中說明，以備不時之需，若有不恰之處，還望各位予以指教。

1、項目結構：

 

2、pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.test.ssm</groupId>
  <artifactId>SSM</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>SSM Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <!-- spring版本號 -->
    <spring.version>4.2.6.RELEASE</spring.version>
    <!-- mybatis版本號 -->
    <mybatis.version>3.4.0</mybatis.version>
    <!-- log4j日志文件管理包版本 -->
    <slf4j.version>1.7.7</slf4j.version>
    <log4j.version>1.2.17</log4j.version>
    <!--jackson版本號-->
    <jackson.version>2.7.1</jackson.version>

    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.7</maven.compiler.source>
    <maven.compiler.target>1.7</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <!-- 表示開發的時候引入，發布的時候不會加載此包 -->
      <!--<scope>test</scope>-->
    </dependency>

    <!-- spring核心包 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-oxm</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!-- mybatis核心包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>${mybatis.version}</version>
    </dependency>

    <!-- mybatis/spring包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.0</version>
    </dependency>

    <dependency>
      <groupId>javax.mail</groupId>
      <artifactId>mail</artifactId>
      <version>1.4</version>
    </dependency>

    <!-- 導入Mysql數據庫鏈接jar包 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.30</version>
    </dependency>
    <!-- 導入dbcp的jar包，用來在applicationContext.xml中配置數據庫 -->
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
      <version>1.2.2</version>
    </dependency>

    <!-- JSTL標簽類 -->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!-- 日志文件管理包 -->
    <!-- log start -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>${log4j.version}</version>
    </dependency>

    <!-- 格式化對象，方便輸出日志 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.1.41</version>
    </dependency>

    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>${slf4j.version}</version>
    </dependency>

    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-log4j12</artifactId>
      <version>${slf4j.version}</version>
    </dependency>
    <!-- log end -->

    <!-- 映入JSON -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp.jstl</groupId>
      <artifactId>javax.servlet.jsp.jstl-api</artifactId>
      <version>1.2.1</version>
    </dependency>

    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-lang3</artifactId>
      <version>3.6</version>
    </dependency>
    
    <!-- commons-fileupload 1.1以后移除了commons-io需要單獨引入 -->
    <dependency>
         <groupId>commons-fileupload</groupId>
         <artifactId>commons-fileupload</artifactId>
        <version>1.2.1</version>
     </dependency>
     <!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
	<dependency>
	    <groupId>commons-io</groupId>
	    <artifactId>commons-io</artifactId>
	    <version>2.4</version>
	</dependency>
     
  </dependencies>

  <build>
    <finalName>SSM</finalName>
  </build>
</project>

　3、spring-mvc.xml  springmvc配置文件

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                        http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
                        http://www.springframework.org/schema/context
                        http://www.springframework.org/schema/context/spring-context-3.1.xsd
                        http://www.springframework.org/schema/mvc
                        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
    <!-- 自動掃描該包，使用SpringMVC認為包下用了@Controller注解的類是控制器,避免掃描@Service導致事務不能使用 -->
    <context:component-scan base-package = "com.ssm.test">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Service"/>
    </context:component-scan>

   
	
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
	    <!-- set the max upload size100MB --> 
	   <property name="maxUploadSize"> 
	   <value>10485760000</value> 
	   </property> 
	   <property name="maxInMemorySize"> 
	   <value>4096</value> 
	   </property> 
	</bean>

    <!-- 定義跳轉的文件的前后綴 ，視圖模式配置-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 自動給后面action的方法return的字符串加上前綴和后綴，變成一個 可用的url地址 -->
        <property name="prefix" value="/WEB-INF/page/" />
        <property name="suffix" value=".jsp" />
    </bean>

    <!-- 添加后可以顯示welcome-file界面 -->
    <mvc:default-servlet-handler/>

    <!-- 啟動注解 -->
    <mvc:annotation-driven />
    
    
</beans>

　　4、spring-mybatis.xml 整合spring與mybatis

<?xml version="1.0" encoding="UTF-8" ?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                        http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
                        http://www.springframework.org/schema/context
                        http://www.springframework.org/schema/context/spring-context-3.1.xsd
                        http://www.springframework.org/schema/tx
                        http://www.springframework.org/schema/tx/spring-tx.xsd">
    <!-- 自動掃描 -->
    <context:component-scan base-package="com.ssm.test">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>

    <!-- 引入數據庫配置文件 -->
    <bean id = "propertyConfigurer"
          class = "org.springframework.beans.factory.config.PreferencesPlaceholderConfigurer">
        <property name = "location" value="classpath:jdbc.properties" />
    </bean>
    <!-- 連接池 -->
    <bean id = "dataSource" class = "org.apache.commons.dbcp.BasicDataSource"
          destroy-method = "close">
        <property name="driverClassName" value="${jdbc.driver}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        <!-- 初始化連接大小 -->
        <property name="initialSize" value="${jdbc.initialSize}" />
        <!-- 連接池最大數量 -->
        <property name="maxActive" value="${jdbc.maxActive}"/>
        <!-- 連接池最大空閑 -->
        <property name="maxIdle" value="${jdbc.maxIdle}" />
        <!-- 連接池最小空閑 -->
        <property name="minIdle" value="${jdbc.minIdle}" />
        <!-- 獲取連接最大等待時間 -->
        <property name="maxWait" value="${jdbc.maxWait}" />
    </bean>

    <!-- 結合Spring和Mybatis -->
    <bean id = "sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!--給映射的類配置別名，駝峰命名，默認首字母小寫-->
        <property name="typeAliasesPackage" value="com.ssm.test.entity"/>
        <!-- 自動掃描mapping.xml文件 -->
        <property name = "mapperLocations" value="classpath:com/ssm/test/mapper/*.xml" />
    </bean>

    <!-- DAO接口所在包名，Spring會自動查找其下的類 -->
    <bean class = "org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name = "basePackage" value="com.ssm.test.dao" />
        <property name = "sqlSessionFactoryBeanName" value = "sqlSessionFactory" />
    </bean>

    <!-- 定義事務 -->
    <bean id = "transactionManager"
          class = "org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name = "dataSource" ref = "dataSource" />
    </bean>

    <!-- 使用注解定義事務 -->
    <tx:annotation-driven transaction-manager = "transactionManager" />
</beans>

　　5、jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/test
jdbc.username=root
jdbc.password=123123
#初始化連接數
jdbc.initialSize=0
#最大活躍連接數
jdbc.maxActive=20
#最大連接數
jdbc.maxIdle=20
#最小連接數
jdbc.minIdle=1
#最大等待時間
jdbc.maxWait=60000

　　6、log4j.properties配置

log4j.rootLogger=INFO,Console,File
log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.Target=System.out
log4j.appender.Console.layout = org.apache.log4j.PatternLayout
log4j.appender.Console.layout.ConversionPattern=[%c] - %m%n

log4j.appender.File = org.apache.log4j.RollingFileAppender
log4j.appender.File.File = logs/ssm.log
log4j.appender.File.MaxFileSize = 10MB
log4j.appender.File.Threshold = ALL
log4j.appender.File.layout = org.apache.log4j.PatternLayout
log4j.appender.File.layout.ConversionPattern =[%p] [%d{yyyy-MM-dd HH\:mm\:ss}][%c]%m%n

　　7、web.xml配置

<?xml version="1.0" encoding="UTF-8"?>

<web-app  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns="http://java.sun.com/xml/ns/javaee"
          xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
          version="3.0">
  <display-name>Archetype Created Web Application</display-name>
  <!-- Spring和Mybatis的配置文件 -->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring-mybatis.xml</param-value>
  </context-param>
  <context-param>
    <param-name/>
    <param-value/>
  </context-param>

  <!-- 編碼過濾器 -->
  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <async-supported>true</async-supported>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!-- Spring監聽器 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!-- 防止Spring內存溢出監聽器 -->
  <listener>
    <listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>
  </listener>

  <!-- Spring MVC servlet -->
  <servlet>
    <servlet-name>SpringMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <!-- 容器在啟動時就加載這個servlet -->
    <load-on-startup>1</load-on-startup>
    <async-supported>true</async-supported>
  </servlet>
  

  <servlet-mapping>
    <servlet-name>SpringMVC</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
  

  <!-- 設置默認首頁 -->
  <welcome-file-list>
    <welcome-file>/index.jsp</welcome-file>
  </welcome-file-list>

</web-app>

　　8、創建實體：User.java

package com.ssm.test.entity;

import java.io.Serializable;

public class User implements Serializable {

    private  int id;
    private String name;
    private String password;
    private int age;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

}

　　9、創建service接口及實現類

　　9.1、UserService.java

package com.ssm.test.service;

import com.ssm.test.entity.User;

public interface UserService {
    User queryUserInfoById(String id);
}

　　9.2、UserServiceImpl.java

package com.ssm.test.service.impl;

import com.ssm.test.dao.UserDao;
import com.ssm.test.entity.User;
import com.ssm.test.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserDao userDao;

    @Override
    public User queryUserInfoById(String id) {
        return userDao.queryUserInfoById(id);
    }
}

　10、創建數據交互層接口及對應的mapper文件： 

　10.1、 UserDao.java 

package com.ssm.test.dao;

import com.ssm.test.entity.User;

public interface UserDao {

    User queryUserInfoById(String id);
}

　　10.2、User.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.ssm.test.dao.UserDao">
    <select id="queryUserInfoById" parameterType="string" resultType="user">
        select name as name,age as age,password as password from user where id = #{id}
    </select>
</mapper>

11、創建控制層：UserController.java

package com.ssm.test.controller;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import com.ssm.test.entity.User;
import com.ssm.test.service.UserService;

@Controller
@RequestMapping("/user")
public class UserController {

    private static Logger logger = Logger.getLogger(UserController.class);
    private static final String excelPath = "E:\\";

    @Autowired
    private UserService userService;

    @RequestMapping("/index")
    public ModelAndView index(HttpServletRequest request, ModelAndView model){
        User user = null;
        try {
            String id = request.getParameter("id");
            if (StringUtils.isNotEmpty(id)){
                user = userService.queryUserInfoById(id);
            }
        model.addObject("name",user.getName());
        model.addObject("age",user.getAge());
        model.addObject("pw",user.getPassword());
        model.setViewName("index");
        } catch (Exception e) {
            logger.error("user異常：",e);
        }
        return model;
    }
    
    @RequestMapping("/upload")
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file,HttpServletRequest request) {
    	
    	String uname = request.getParameter("uname");
    	String pw = request.getParameter("pw");
    	String age = request.getParameter("age");
    	String originalFilename = file.getOriginalFilename();
    	
    	String fileName = excelPath + File.separator + "test"+ File.separator +  originalFilename;
    	
    	File desFile = new File(fileName);
    	if (!desFile.exists()) {
			desFile.getParentFile().mkdirs();
		}
    	logger.info("【"+uname+ ","+ age+"歲,密碼："+pw+"】" + "上傳文件："+originalFilename);
    	boolean createFileFlag = createFile(file,desFile);
    	if (createFileFlag) {
    		return "{\"state\":\"succ\",\"msg\":\"succ\"}";
		}else {
			return "{\"state\":\"fail\",\"msg\":\"fail\"}";
		}
    	
    }

    private boolean createFile(MultipartFile file,File desFile) {
        boolean flag = false;
        try {
            BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(desFile));
            bos.write(file.getBytes());
            bos.flush();
            bos.close();
            flag = true;
        } catch (Exception e) {
            logger.error("【文件上傳異常】：",e);
        }
        return flag;
    }
}

　　12、創建jsp頁面：index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!--獲取URL根路徑-->
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
	<link rel="stylesheet" href="${basePath}/SSM/css/webuploader.css"/>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
	<table>
		<tr>
			<td>
				姓名：<input id="uname" value="${name}" type="text">
			</td>
		</tr>
		<tr>
			<td>
				年齡：<input id="age" value="${age}" type="text">
			</td>
		</tr>
		<tr>
			<td>
				密碼：<input id="pw" value="${pw}" type="password">
			</td>
		</tr>
		<tr>
			<td id="fileList" style=""></td>
		</tr>
		<tr>
			<td id="csvPicker" class="webuploader-container clearfix" style="float: left;"></td>
			<td id="UploadBtn" class="webuploader-pick clearfix" >開始上傳</td>
		</tr>
	</table>
</form>
<script type="text/javascript" src="${basePath}/SSM/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${basePath}/SSM/js/webupload/webuploader.js"></script>
<script type="text/javascript">
	var $list = $('#fileList');
	var uploader = WebUploader.create({
	    // 存在文件自動上傳
	    auto: false,
	    // swf文件路徑
	    swf: './Uploader.swf',
	    // 文件接收服務端地址。
	    server: 'upload.do',
	    // 選擇文件的按鈕。
	    pick: {id: '#csvPicker', label: 'innerHTML', innerHTML: '上傳文件', multiple: false},
	    // 限制文件類型
	    accept: {title: 'xls,xlsx', extensions: 'xls,xlsx', mimeTypes: 'xls/*,xlsx/*'},
	    // 是否分片上傳
	    chunked: false,
	    // 設置分片大小
	    chunkSize: 5242880,
	    // 最高並發線程 1
	    threads: 1,
	    //允許重復上傳
	    duplicate: true,
	    // 壓縮文件
	    resize: false,
	    /** 上傳方式 */
	    method: 'post',
	    //設定單個文件大小 不能超過20M
	    fileSingleSizeLimit: 20 * 1024 * 1024,
	    fileNumLimit:1
	})
	// 當有文件被添加進隊列的時候
	uploader.on('fileQueued', function (file) {
	    $list.append('<div id="' + file.id + '" class="item">' +
	        '<h4 class="info" style="font-size: 14px;margin-top: 4px;margin-bottom: 5px;">' + file.name + '<button type="button" fileId="' + file.id + '"' +
	        ' class="btn btn-danger btn-delete" style="padding: 0px 4px;margin-left: 6px;font-size: 5px;background-color: #999999;border-color: #999999;">' +
	        '<span class="glyphicon glyphicon-trash">X</span></button>' +
	        '<span class="state" style="display: inline-block; margin-left: 12px">等待上傳...</span></h4>' +
	        '</div>');
	    /** 刪除隊列文件 */
	    $(document).on('click', '.btn-delete', function () {
	        uploader.removeFile(file,true);
	        $(this).parent().parent().fadeOut();
	        $(this).parent().parent().remove();
	    })
	});
	/** 開始上傳 */
	$('#UploadBtn').click(function () {
	    uploader.upload($('.btn-delete').attr('fileId'))
	});
	/** 上傳過程中進度條 */
	uploader.on('uploadProgress', function (file, percentage) {
	    var $li = $('#' + file.id);
	    $li.find('.state').text(Math.ceil(percentage * 100) + '%');
	});
	/** 完成上傳 */
	uploader.on('uploadSuccess', function (file, reponse) {
	    if(reponse.state == 'succ'){
	        alert(reponse.msg);
	        //this.options.formData.type = '';
	        this.options.formData.age = '';
	        this.options.formData.uname = '';
	        this.options.formData.pw = '';
	        uploader.removeFile(uploader.getFile(file.id));
	        uploader.getFiles('inited');
	    }else{
	    	//上傳失敗將文件從隊列中移出避免再次添加統一文件時不顯示名稱
	        uploader.removeFile(uploader.getFile(file.id));
	        uploader.getFiles('inited');
	        alert(reponse.msg);
	    }
	});
	/** 文件上傳開始之前 */
	uploader.on('uploadStart', function (file, reponse) {
	    var uname = $("#uname").val();
	    var pw = $("#pw").val();
	    var age = $("#age").val();
	   	if(name == null && name == ''){
	   		alert('姓名不能為空');
	   		return false;
	   	}
	   	if(pw == null && pw == ''){
	   		alert('密碼不能為空');
	   		return false;
	   	}
	    //this.options.formData.type = $("#type option:selected").val();
	    this.options.formData.uname = uname;
	    this.options.formData.age = age;
	    this.options.formData.pw = pw;
	});
	/** 上傳失敗 */
	uploader.on('uploadError', function (file) {
	    $('#' + file.id).find('.state').text('上傳出錯！');
	});
	/** 上傳完成后執行 */
	uploader.on('uploadComplete', function (file) {
	    $('#' + file.id).fadeOut();
	});
	/** 文件上傳前處理 */
	uploader.on('beforeFileQueued', function (chunk, data) {
	    /*
	    	在文件加入隊列之前可以根據需求在此監聽事件中加入自己的處理邏輯
	    */
	});
	/**
	 * 驗證文件格式以及文件大小
	 */
	uploader.on("error", function (type) {
	    if (type == "Q_TYPE_DENIED") {
	        alert("請上傳xlsx格式文件");
	    } else if (type == "F_EXCEED_SIZE") {
	    	alert("文件大小不能超過20M");
	    }
	});
</script>
</body>
</html>

　　13、測試：

打開瀏覽器訪問：http://localhost:9090/SSM/user/index.do?id=1

上傳成功后獲取到的響應信息提示

控制台log打印

 

檢查本地文件存儲是否存儲成功