SSM框架整合以及webupload的集成與使用javascript
在項目中最近用到了webupload.js,也方方面面遇到了很多問題,好比上傳文件前對錶單參數校驗,當校驗失敗不予提交,及在文件上傳成功後,選擇同名文件,則不會顯示文件,但能夠提交表單。外加一直沒有對SSM框架整合沒有整理過,藉此機會作以學習筆記。遇到的具體問題會在代碼註釋中說明,以備不時之需,如有不恰之處,還望各位予以指教。css
一、項目結構:html
二、pom.xmljava
<?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>
三、spring-mvc.xml springmvc配置文件mysql
<?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>
四、spring-mybatis.xml 整合spring與mybatisjquery
<?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>
五、jdbc.propertiesweb
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
六、log4j.properties配置spring
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
七、web.xml配置sql
<?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>
八、建立實體: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; } }
九、建立service接口及實現類
9.一、UserService.java
package com.ssm.test.service; import com.ssm.test.entity.User; public interface UserService { User queryUserInfoById(String id); }
9.二、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); } }
十、建立數據交互層接口及對應的mapper文件:
10.一、 UserDao.java
package com.ssm.test.dao; import com.ssm.test.entity.User; public interface UserDao { User queryUserInfoById(String id); }
10.二、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>
十一、建立控制層: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; } }
十二、建立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>
1三、測試:
打開瀏覽器訪問:http://localhost:9090/SSM/user/index.do?id=1
上傳成功後獲取到的響應信息提示
控制檯log打印
檢查本地文件存儲是否存儲成功