原文地址：https://blog.csdn.net/chenchunlin526/article/details/70945877
SpringMVC上傳圖片總結（1）---常規方法進行圖片上傳，使用了MultipartFile、MultipartHttpServletRequest
◆◆◆
1、web.xml配置，這里主要配置全局的攔截器過濾器等等，常規配置，與其他項目相同，有刪減，根據自己的項目情況來定。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:web="http://java.sun.com/xml/ns/javaee" 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"
id="WebApp_ID" version="3.0">
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<filter>
<filter-name>logFilter</filter-name>
<filter-class>com.ourchem.web.filter.LogFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>logFilter</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>logFilter</filter-name>
<url-pattern>/j_spring_security_check</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>logFilter</filter-name>
<url-pattern>/j_spring_security_logout</url-pattern>
</filter-mapping>
<!-- 配置spring security 權限過濾器 -->
<filter>
<filter-name>springSecurityFilterChain</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter-mapping>
<filter-name>springSecurityFilterChain</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- SpringMVC的字符編碼過濾器 -->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>false</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- SpringMVC的前端控制器 -->
<servlet>
<servlet-name>spring-mvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring-mvc</servlet-name>
<!-- 由SpringMVC攔截.do的請求 -->
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>60</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>/WEB-INF/jsp/index.jsp</welcome-file>
<welcome-file>/index.jsp</welcome-file>
</welcome-file-list>
<error-page>
<error-code>404</error-code>
<location>/WEB-INF/jsp/404.jsp</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/WEB-INF/jsp/500.jsp</location>
</error-page>
</web-app>
2、springmvc-servlet.xml配置，這里主要配置springmvc解析器CommonsMultipartResolver等等，這里主要是配置文件上傳解析器。
<?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:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:aop="http://www.springframework.org/schema/aop"
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/aop
http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd">
<aop:aspectj-autoproxy />
<mvc:annotation-driven />
<!-- 把標記了@Controller注解的類轉換為bean -->
<context:component-scan base-package="com.ourchem.web.**.controller" use-default-filters="false" >
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!-- 上傳文件的設置 ，maxUploadSize=-1，表示無窮大。uploadTempDir為上傳的臨時目錄 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 設置上傳文件的最大尺寸為10MB 10*1024*1024 -->
<property name="maxUploadSize">
<value>10485760</value>
</property>
</bean>
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
<bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<!-- 對模型視圖名稱的解析，即在模型視圖名稱添加前后綴 -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
</beans>
3、文件上傳jsp頁面 upload.jsp，上傳頁面與圖片回顯頁面。
情況一：input標簽的name屬性全都相同
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%><%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %><!DOCTYPE html><html lang="zh-CN"><head><%@ include file="/common/common.jsp"%><title>${projectName }一上傳文件</title></head><body><%@ include file="/common/include.jsp" %><div id="top"><div id="layoutHeader"><%@ include file="/common/head.jsp" %></div><div id="layoutMain"><div class="infor-tit">上傳文件</div><div class="personal-btn"><a class="fl del-back" href="${basePath }/cms/notices/toUpload.do">返回上傳</a></div><div class="infor2-container"><form class="fl-l" id="uploadForm" enctype="multipart/form-data" method="post" action="<c:url value= '/cms/notices/upload.do'/>" ><!-- 上傳文件1：<input type="file" name="file"/><br/> --><!-- 上傳文件2：<input type="file" name="file"/><br/> -->上傳文件3：<input type="file" name="file"/><input type="submit" value="提 交"/></form><h2>上傳結果（單個文件）：</h2><img alt="" src="${basePath }${fileUrl }" /><!-- <h2>上傳結果（單個文件）：</h2> --><%-- <img alt="" src="${basePath }${fileUrl }" /> --%><!-- 多文件上傳則用這個，把上面的input標簽注釋全部打開，然后把上面的單個文件顯示注釋掉 --><h2>上傳結果（多個文件）：</h2><c:forEach items="${fileUrlList}" var="fileUrl" varStatus="status"><img alt="" src="${basePath }${fileUrl }" /></c:forEach></div></div></div><%@include file="/common/bottom.jsp" %><script type="text/javascript"src="${basePath}/scripts/custom/ie-placeholder.js"></script></body></html>
情況二【多文件上傳】：input標簽name屬性值各不相同，文件上傳jsp頁面 upload.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%><%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %><!DOCTYPE html><html lang="zh-CN"><head><%@ include file="/common/common.jsp"%><title>${projectName }一上傳文件</title></head><body><%@ include file="/common/include.jsp" %><div id="top"><div id="layoutHeader"><%@ include file="/common/head.jsp" %></div><div id="layoutMain"><div class="infor-tit">上傳文件</div><div class="personal-btn"><a class="fl del-back" href="${basePath }/cms/notices/toUpload.do">返回上傳</a></div><div class="infor2-container"><form class="fl-l" id="uploadForm" enctype="multipart/form-data" method="post" action="<c:url value= '/cms/notices/upload.do'/>" >上傳文件1：<input type="file" name="file1"/><br/><br/><br/>上傳文件2：<input type="file" name="file2"/><br/><br/><br/>上傳文件3：<input type="file" name="file3"/><input type="submit" value="提 交"/></form><h2>上傳結果（多個文件）：</h2><c:forEach items="${fileUrlList}" var="fileUrl" varStatus="status"><img alt="" src="${basePath }${fileUrl }" /></c:forEach></div></div></div><%@include file="/common/bottom.jsp" %><script type="text/javascript"src="${basePath}/scripts/custom/ie-placeholder.js"></script></body></html>
4、文件上傳controller控制器
/**
* 單個文件上傳，方式一，使用MultipartFile作為方法參數接收傳入的文件
* 用 transferTo方法來保存圖片，保存到本地磁盤。
*
* @RequestParam("file")中的file對應input標簽中的name屬性值
* @author chunlynn
*/
@RequestMapping("upload")
public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request, ModelMap model) {
// 先判斷文件是否為空
if (!file.isEmpty()) {
// 獲得原始文件名
String fileName = file.getOriginalFilename();
// 重命名文件
String newfileName = new Date().getTime() + String.valueOf(fileName);
//獲得物理路徑webapp所在路徑
/**
* request.getSession().getServletContext().getRealPath("/")表示當前項目的根路徑，如
* D:\Workspaces\eclipse_luna\.metadata\.plugins\org.eclipse.wst.server.core\tmp3\wtpwebapps\sky\
*/
String pathRoot = request.getSession().getServletContext().getRealPath("");
// 項目下相對路徑
String path = FILE_PATH + newfileName;
// 創建文件實例
File tempFile = new File(pathRoot + path);
// 判斷父級目錄是否存在，不存在則創建
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdir();
}
// 判斷文件是否存在，否則創建文件（夾）
if (!tempFile.exists()) {
tempFile.mkdir();
}
try {
// 將接收的文件保存到指定文件中
file.transferTo(tempFile);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
// 方法一：model屬性也行
model.addAttribute("fileUrl", path); //保存路徑，用於jsp頁面回顯
// 方法二：Request域屬性也行，兩個二選一即可。
// request.setAttribute("fileUrl", path);
}
// getWiewPath方法里就處理了一些路徑，相當於轉發forward，返回 return "cms/notices/upload";
return getViewPath("upload"); // 轉發到upload.jsp頁面
}
@RequestMapping("/toUpload")
public String toUpload() {
// 相當於轉發forward，轉發到cms/notices/upload.jsp頁面,框架會找到該邏輯視圖名對應的 View並渲染
return getViewPath("upload");
}
/**
單文件上傳，方式二，利用MultipartHttpServletRequest來解析request中的文件
* 用 transferTo方法來保存圖片，保存到本地磁盤。
* 普通request是無法解析請求中的文件的。
MultipartHttpServletRequest是springmvc框架中的一個接口，默認實現類是Default
MultipartHttpServletRequest
@author chunlynn
/
@RequestMapping("upload2")
public String upload2(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
// 先實例化一個文件解析器
CommonsMultipartResolver coMultipartResolver = new CommonsMultipartResolver(request.getSession()
.getServletContext());
// 判斷request請求中是否有文件上傳
if (coMultipartResolver.isMultipart(request)) {
// 轉換request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 獲得文件
MultipartFile file = multiRequest.getFile("file");
if (!file.isEmpty()) {
// 獲得原始文件名
String fileName = file.getOriginalFilename();
String newfileName = new Date().getTime() + String.valueOf(fileName);
//獲得物理路徑webapp所在路徑
String pathRoot = request.getSession().getServletContext().getRealPath("");
// 項目下相對路徑
String path = FILE_PATH + newfileName;
// 創建文件實例
File tempFile = new File(pathRoot + path); //文件保存路徑為pathRoot + path
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdir();
}
if (!tempFile.exists()) {
tempFile.mkdir();
}
try {
// Transfer the received file to the given destination file.
file.transferTo(tempFile);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
// 方法一：model屬性也行
model.addAttribute("fileUrl", path); //保存路徑，用於jsp頁面回顯
// 方法二：Request域屬性也行，兩個二選一即可。
// request.setAttribute("fileUrl", path); //保存路徑，用於jsp頁面回顯
}
}
return getViewPath("upload");
}
/**
多文件上傳，方式一：利用MultipartFile[]作為方法的參數接收傳入的文件
用 transferTo方法來保存圖片，
保存到本地磁盤。
@author chunlynn
/
@RequestMapping("upload3")
public String upload3(@RequestParam("file") MultipartFile[] files, HttpServletRequest request,
HttpServletResponse response, ModelMap model) {
List<String> fileUrlList = new ArrayList<String>(); //用來保存文件路徑，用於jsp頁面回顯用
String path = "";
// 先判斷文件files不為空
if (files != null && files.length > 0) {
for (MultipartFile file : files) { //循環遍歷，取出單個文件，下面的操作和單個文件就一樣了
if (!file.isEmpty()) {//這個判斷必須加上
// 獲得原始文件名
String fileName = file.getOriginalFilename();
String newfileName = new Date().getTime() + String.valueOf(fileName);
//獲得物理路徑webapp所在路徑
String pathRoot = request.getSession().getServletContext().getRealPath("");
// 項目下相對路徑
path = FILE_PATH + newfileName;
// 創建文件實例
File tempFile = new File(pathRoot + path); //文件保存路徑為pathRoot + path
if (!tempFile.getParentFile().exists()) { /這個判斷必須加上
tempFile.getParentFile().mkdir();
}
if (!tempFile.exists()) {
tempFile.mkdir();
}
try {
// Transfer the received file to the given destination file.
file.transferTo(tempFile);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
fileUrlList.add(path);
}
}
// 方法一：model屬性保存圖片路徑也行
model.addAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
// 方法二：request域屬性保存圖片路徑也行，兩個二選一即可。
// request.setAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
}
return getViewPath("upload");
}
/**
多文件上傳，方式二：利用MultipartHttpServletRequest來解析Request中的文件
用 transferTo方法來保存圖片，保存到本地磁盤。
@author chunlynn
*/
@RequestMapping("upload4")
public String upload4(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
// 先實例化一個文件解析器
CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()
.getServletContext());
// 判斷request請求中是否有文件上傳
if (coMultiResolver.isMultipart(request)) {
List<String> fileUrlList = new ArrayList<String>(); //用來保存文件路徑，用來jsp頁面遍歷回顯
// 轉換Request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 獲得文件，方式一
List<MultipartFile> files = multiRequest.getFiles("file");
for (MultipartFile file : files) { //循環遍歷，取出單個文件，下面的操作和單個文件就一樣了
if (!file.isEmpty()) { //這個判斷必須要加
// 獲得原始文件名
String fileName = file.getOriginalFilename();
String newfileName = new Date().getTime() + String.valueOf(fileName);
//獲得物理路徑webapp所在路徑
String pathRoot = request.getSession().getServletContext().getRealPath("");
// 項目下相對路徑
String path = FILE_PATH + newfileName;
// 創建文件實例
File tempFile = new File(pathRoot + path); //文件保存路徑為pathRoot + path
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdir();
}
if (!tempFile.exists()) {
tempFile.mkdir();
}
try {
file.transferTo(tempFile);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
fileUrlList.add(path);
}
}
// 方法一：model屬性保存圖片路徑也行
model.addAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
// 方法二：request域屬性保存圖片路徑也行，兩個二選一即可。
// request.setAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
}
return getViewPath("upload");
}
/**
多文件上傳，方式三：利用MultipartHttpServletRequest來解析Request中的文件，用流的方式將文件存到磁盤
使用流來存圖片，保存到本地磁盤。
@author chunlynn
/
@RequestMapping("upload5")
public String upload5(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
// 先實例化一個文件解析器
CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()
.getServletContext());
// 判斷request請求中是否有文件上傳
if (coMultiResolver.isMultipart(request)) {
List<String> fileUrlList = new ArrayList<String>(); //用來保存文件路徑
// 轉換Request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 獲得文件，方式一，input標簽name屬性值相同都為"file"
List<MultipartFile> files = multiRequest.getFiles("file");
for (MultipartFile file : files) { //循環遍歷，取出單個文件，下面的操作和單個文件就一樣了
if (!file.isEmpty()) { //這個判斷必須要加
// 獲得原始文件名
String fileName = file.getOriginalFilename();
String newfileName = new Date().getTime() + String.valueOf(fileName);
//獲得物理路徑webapp所在路徑
String pathRoot = request.getSession().getServletContext().getRealPath("");
// 項目下相對路徑
String path = FILE_PATH + newfileName;
try {
//創建輸出流，用流將文件保存到指定目錄
FileOutputStream fos = new FileOutputStream(pathRoot + path);
// 獲得輸入流
InputStream in = file.getInputStream();
int len = 0;
byte[] buffer = new byte[1024]; //創建緩沖區 1kB，byte表示一個字節B，1KB=1024B
// Reads some number of bytes from the inputstream and stores them into the buffer array b.
while ((len = in.read(buffer)) != -1) { // 如果不用緩存，會一個字節一個字節的寫，這樣影響效率，效率低下
fos.write(buffer, 0, len); //每次1KB的方式寫入
}
fos.flush();
fos.close();
in.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
fileUrlList.add(path);
}
}
// 方法一：model屬性保存圖片路徑也行
model.addAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
// 方法二：request域屬性保存圖片路徑也行，兩個二選一即可。
// request.setAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
}
return getViewPath("upload");
}
/**
多文件上傳，方式三：利用MultipartHttpServletRequest來解析Request中的文件，用流的方式將文件存到磁盤
使用流來存圖片，保存到本地磁盤。
jsp頁面的input標簽可以有不同的name屬性值
@author chunlynn
*/
@RequestMapping("upload6")
public String upload6(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
// 先實例化一個文件解析器
CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()
.getServletContext());
// 判斷request請求中是否有文件上傳
if (coMultiResolver.isMultipart(request)) {
List<String> fileUrlList = new ArrayList<String>(); //用來保存文件路徑
// 轉換Request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 獲得文件，方式二
// Return an java.util.Iterator of String objects containing the parameter names of the multipart files contained in this request.
// jsp頁面的input標簽可以有不同的name屬性值
Iterator<String> fileNames = multiRequest.getFileNames();
while (fileNames.hasNext()) { //循環遍歷
MultipartFile file = multiRequest.getFile(fileNames.next()); //取出單個文件
if (!file.isEmpty()) { //這個判斷必須要加，下面的操作和單個文件就一樣了
// 獲得原始文件名
String fileName = file.getOriginalFilename();
String newfileName = new Date().getTime() + String.valueOf(fileName);
//獲得物理路徑webapp所在路徑
String pathRoot = request.getSession().getServletContext().getRealPath("");
// 項目下相對路徑
String path = FILE_PATH + newfileName;
try {
//創建輸出流，用流將文件保存到指定目錄
FileOutputStream fos = new FileOutputStream(pathRoot + path);
// 獲得輸入流
InputStream in = file.getInputStream();
int len = 0;
byte[] buffer = new byte[1024]; //創建緩沖區 1kB，byte表示一個字節B，1KB=1024B
// Reads some number of bytes from the inputstream and stores them into the buffer array b.
while ((len = in.read(buffer)) != -1) { // 如果不用緩存，會一個字節一個字節的寫，這樣影響效率，效率低下
fos.write(buffer, 0, len); //每次1KB的方式寫入
}
fos.flush();
fos.close();
in.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
fileUrlList.add(path);
}
}
// 方法一：model屬性保存圖片路徑也行
model.addAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
// 方法二：request域屬性保存圖片路徑也行，兩個二選一即可。
// request.setAttribute("fileUrlList", fileUrlList); //保存路徑，用於jsp頁面回顯
}
return getViewPath("upload");
}
public static final String FILE_PATH = "/upload/chunlynn/"; //相對路徑
/**
單文件上傳，利用MultipartHttpServletRequest來解析Request中的文件，用流的方式將文件存到數據庫。
使用流來存圖片，保存進數據庫。保存進數據庫的多半是用戶頭像之類的小圖片，占用空間比較小的。一次一張。
jsp頁面的其他參數，可以通過
request
.getParameter()獲取
@author chunlynn
*/
@RequestMapping("upload7")
public String upload7(HttpServletRequest request, HttpServletResponse response, ModelMap model) {
// 先實例化一個文件解析器
CommonsMultipartResolver coMultiResolver = new CommonsMultipartResolver(request.getSession()
.getServletContext());
// 判斷request請求中是否有文件上傳
if (coMultiResolver.isMultipart(request)) {
// 轉換Request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 獲得文件
MultipartFile file = multiRequest.getFile("file");
if (!file.isEmpty()) { //這個判斷必須要加
try {
// 舉例，Notices就是一個普通的model類
Notices notices = new Notices();
notices.setCreateDate(new Date());
notices.setPicPath("/upload/aaa.jpg");
// jsp頁面中的其他非文件類參數，直接request就可以獲取到
notices.setTitle(request.getParameter("title"));
if (StringUtil.isNotEmpty(request.getParameter("isShowPic"))) {
notices.setIsShowPic(1);
} else {
notices.setIsShowPic(0);
}
notices.setIsShowTitle(1);
notices.setContent("這是內容content");
// 獲得輸入流
InputStream in = file.getInputStream();
byte[] data = new byte[] {};
data = inputStreamToByte(in);// 將文件保存到字節數組中
notices.setLogo(data); // 將字節數組保存到對象中
noticesService.save(notices); // 保存進數據庫
in.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}
return getViewPath("upload");
}
/**
將文件保存到字節數組中
This class implements an output stream in which the data is written into a byte array.
* @author chunlynn
*/
public byte[] inputStreamToByte(InputStream in) throws Exception {
// This class implements an output stream in which the data is written into a byte array.
ByteArrayOutputStream bos = new ByteArrayOutputStream(); // 輸出流對象，用來接收文件流，然后寫入一個字節數組中
int len;
byte[] buffer = new byte[1024]; //緩存1KB
while ((len = in.read(buffer)) != -1) {
bos.write(buffer, 0, len);
}
byte[] data = bos.toByteArray(); // 字節數組，輸出流中的文件保存到字節數組
bos.close();
return data;
}
/**
該方法放在父類controller中
* @author chunlynn
*/
protected String viewPath = "cms/notices"; //在本controller進行初始化
protected String getViewPath(String viewName) {
if (viewPath == null)
return viewName;
if (viewPath.endsWith(File.separator))
return viewPath + viewName;
return viewPath + File.separator + viewName;
}
1）、數對應數據庫字段設計
2）、對應的bean：
private byte[] logo; //頭像
public byte[] getLogo() {
return logo;
}
public void setLogo(byte[] logo) {
this.logo = logo;
}
3）、保存進數據庫成功截圖
4）、保存進數據庫的圖片，如何在頁面上顯示？
/**
* 以字節數組保存在數據庫里的圖片，如要在jsp頁面顯示，則調用controller方法，該用戶有頭像則會顯示，然后img標簽的src中獲得
* 的是寫在Reponse中的流
*/
<div id="userLogoContainer" class="head-pic portrait">
<c:if test="${! empty domain.LOGO}" var="rs">
<img src="<c:url value='/cms/notices/getUserLogo.do'/>" width="100px" height="100px"/>
</c:if>
</div>
/**
獲取用戶logo
@author
chunlynn
*/
@RequestMapping(value = "/getUserLogo")
public void getUserLogo(HttpServletRequest request, HttpServletResponse response) throws Exception {
Loginer loginer = (Loginer) request.getSession().getAttribute(Loginer.SESSION_KEY);
User user = userInfoService.getUserById(loginer.getId()); //獲取當前用戶對象
if (user != null) {
if (user.getLogo() != null) {
byte[] data = new byte[] {};
data = (byte[]) user.getLogo(); //獲取當前用戶對象中的logo數據，轉為字節數組
response.setContentType("");
OutputStream outputStream = response.getOutputStream(); //response的輸出流
for (int i = 0; i < data.length; i++) {
outputStream.write(data[i]); //resp出字節流
}
outputStream.close(); //關閉輸出流
}
}
}
5、利用百度上傳組件WebUploader進行上傳，springmvc進行接收處理
百度上傳組件初始化時，
組件默認會生成一個隱藏的input標簽，name屬性值為“file”，且encType="multipart/form-data"。后台controller按上面springmvc處理方法接收文件即可。
/**
*
*/
<!-- webuploader.js -->
<script type="text/javascript" src="${basePath }/scripts/webuploader/webuploader.js"> </script>
<!-- webuploader.css -->
<link rel="stylesheet" type="text/css" href="${basePath }/scripts/webuploader/webuploader.css">
<script type="text/javascript" src="${basePath }/scripts/cms/mywebuploader.js"></script>
<!--dom結構部分-->
<div id="uploader-demo" >
<!--用來存放item，圖片列表fileList-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker" >選擇圖片</div>
</div>
<!-- <input type="button" id="btn" value="開始上傳"> -->
=js文件=
$(function() {
var $ = jQuery,
// 展示圖片列表的容器
$list = $('#fileList'),
// 優化retina, 在retina下這個值是2
ratio = window.devicePixelRatio || 1,
// 縮略圖大小，像素像素
thumbnailWidth = 100 ratio,
thumbnailHeight = 100 ratio,
// Web Uploader實例
uploader;
// 初始化Web Uploader
var uploader = WebUploader.create({
// 選完文件后，是否自動上傳。
auto: true,
// swf文件路徑
swf: basePath + '/scripts/webuploader/Uploader.swf',
// 文件接收服務端。
server: basePath + '/cms/notices/upload8.do',
//fileVal : "file", // 指定input標簽name的屬性值
threads:'5', //同時運行5個線程傳輸
fileNumLimit:'10', //文件總數量只能選擇10個
// 選擇文件的按鈕。可選。
// 內部根據當前運行是創建，可能是input元素，也可能是flash.
// pick: '#filePicker',
pick: { id:'#filePicker', //選擇文件的按鈕
multiple:true },
// 只允許選擇圖片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/'
}
});
// 當有文件添加進來的時候，
//監聽fileQueued事件，通過uploader.makeThumb來創建圖片預覽圖。
//PS: 這里得到的是Data URL數據，IE6、IE7不支持直接預覽。可以借助FLASH或者服務端來完成預覽。
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list為容器jQuery實例
$list.append( $li );
// 創建縮略圖, thumbnailWidth x thumbnailHeight 為 100 x 100
uploader.makeThumb( file, function( error, src ) { //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能預覽</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 然后剩下的就是上傳狀態提示了，當文件 上傳過程中, 上傳成功，上傳失敗，上傳完成
// 都分別對應uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
// 文件上傳過程中創建進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重復創建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function( file,response) {
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上傳失敗，現實上傳出錯。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重復創建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上傳失敗');
});
// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
//綁定提交事件
$("#btn").click(function() {
console.log("上傳...");
uploader.upload(); //執行手動提交
console.log("上傳成功");
});
});
全文完。
---------------------------------------------------------------------------------------------------
版權聲明：本文為博主（chunlynn）原創文章，轉載請注明出處 ：http://blog.csdn.net/chenchunlin526/article/details/70945877