Spring MVC带进度条的多文件上传
Posted 木极子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Spring MVC带进度条的多文件上传相关的知识，希望对你有一定的参考价值。
1、关于文件上传进度条的实现
在说Spring MVC文件上传尤其是带滚动条之前先用servlet做一个简单的文件上传并返回进度信息这样的功能。
（1）需要两个包：
commons-fileupload-1.3.1.jar
commons-io-1.4.jar
上面这两个包是Apache 推出的两个包，可以从网上找（2）创建一个记录上传状态的java文件（UploadStatus.java）：
package com.zxm.fileupload;
public class UploadStatus
private long bytesRead;//已读数据
private long contentLength;//文件总数据
private long items;//第几个文件
private long startTime = System.currentTimeMillis();//开始时间
private long useTime = System.currentTimeMillis();//已用时间
private int percent;//完成百分比
public long getBytesRead()
return bytesRead;
public void setBytesRead(long bytesRead)
this.bytesRead = bytesRead;
public long getContentLength()
return contentLength;
public void setContentLength(long contentLength)
this.contentLength = contentLength;
public long getItems()
return items;
public void setItems(long items)
this.items = items;
public long getStartTime()
return startTime;
public void setStartTime(long startTime)
this.startTime = startTime;
public long getUseTime()
return useTime;
public void setUseTime(long useTime)
this.useTime = useTime;
public int getPercent()
return percent;
public void setPercent(int percent)
this.percent = percent;
@Override
public String toString()
// TODO Auto-generated method stub
return "UploadStatus [percent=" + percent + ", items=" + items + "]";
（3）创建一个监听上传信息的监听器，需要实现ProgressListener这个接口（UploadListener.java）:
package com.zxm.fileupload;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.ProgressListener;
public class UploadListener implements ProgressListener
private HttpSession session;
public UploadListener(HttpSession session)
super();
this.session = session;
UploadStatus uploadStatus = new UploadStatus();
session.setAttribute("upload_status", uploadStatus);
@Override
public void update(long bytesRead, long contentLength, int items)
// TODO Auto-generated method stub
UploadStatus uploadStatus = (UploadStatus) session.getAttribute("upload_status");
uploadStatus.setBytesRead(bytesRead);
uploadStatus.setContentLength(contentLength);
uploadStatus.setItems(items);
uploadStatus.setUseTime(System.currentTimeMillis()-uploadStatus.getStartTime());
uploadStatus.setPercent((int)(100*bytesRead/contentLength));
session.setAttribute("upload_status", uploadStatus);
（4）创建servlet文件（ProgressUploadServlet.java）：
package com.zxm.bean.servlet;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.zxm.fileupload.UploadListener;
import com.zxm.fileupload.UploadStatus;
public class ProgressUploadServlet extends HttpServlet
/**
*
*/
private static final long serialVersionUID = 1L;
private ServletContext sc;
private String savePath;
public void init(ServletConfig config) throws ServletException
savePath = config.getInitParameter("savePath");
sc = config.getServletContext();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragrma", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("text/html;charset=utf-8");
UploadStatus status = (UploadStatus) request.getSession(true)
.getAttribute("upload_status");
if (status == null)
response.getWriter().println("没有上传信息");
return;
int percent=status.getPercent();
long length=status.getBytesRead()/1024/1204;
long totalLength=status.getContentLength()/1204/1024;
long time=status.getUseTime();
long velocity=status.getBytesRead()/time;
long totalTime=status.getContentLength()/velocity;
long timeLeft=totalTime-time;
// 格式：百分比||已完成数(M)||文件总长度(M)||传输速率(K)||已用时间(s)||估计总时间(s)||估计剩余时间(s)||正在上传第几个文件
String value = percent + "||" + length + "||" + totalLength + "||"
+ velocity + "||" + time + "||" + totalTime + "||" + timeLeft
+ "||" + status.getItems();
response.getWriter().println(value);
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
HttpSession session = request.getSession(true);
UploadListener listener=new UploadListener(session);
DiskFileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
upload.setProgressListener(listener);
try
List itemList=upload.parseRequest(request);
Iterator itr=itemList.iterator();
while(itr.hasNext())
FileItem item=(FileItem)itr.next();
if(item.isFormField())
System.out.println("表单属性"+item.getFieldName()+"="+item.getString("UTF-8"));
else
if(item.getName()!=null&&!item.getName().equals(""))
File tempFile = new File(item.getName());
File file=new File(sc.getRealPath("/")+"\\\\"+savePath,tempFile.getName());
item.write(file);
response.getWriter().println("文件已上传"+file.getName());
catch(Exception e)
response.getWriter().println("上传文件失败："+e.getMessage());
这个servlet，当get方式请求时获取到的是上传信息的状态，当执行POST方式的请求的时候是进行文件上传。
从这个servlet的doPost方法中可以知道，主要是在创建一个ServletFileUpload对象，并且友这个ServletFileUpload对象绑定一个监听，也就是我们实现接口的监听。
2、Spring MVC带进度条的多文件上传
Spring MVC的搭建我这里不说了，如果不知道的可以参考这个《Spring MVC浅尝》
（1）需要的包：
（2）web.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>SpringMVCFileUpload</display-name>
<servlet>
<servlet-name>dispatch</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>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatch</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
<listener>
<listener-class>
org.springframework.web.util.IntrospectorCleanupListener
</listener-class>
</listener>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>（3）spring-mvc.xml配置：
<?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"
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">
<context:component-scan base-package="com.zxm"></context:component-scan>
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping" />
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
<!-- 定义跳转的文件的前后缀 ，视图模式配置-->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 这里的配置我的理解是自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->
<property name="prefix" value="/" />
<property name="suffix" value=".jsp" />
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
</bean>
<!-- 配置文件上传，如果没有使用文件上传可以不用配置，当然如果不配，那么配置文件中也不必引入上传组件包 -->
<bean id="multipartResolver" class="com.zxm.fileupload.UploadCommonsMultipartResolver">
<!-- 默认编码 -->
<property name="defaultEncoding" value="utf-8" />
<!-- 文件大小最大值 -->
<property name="maxUploadSize" value="10485760000" />
<!-- 内存中的最大值 -->
<property name="maxInMemorySize" value="40960" />
</bean>
</beans>注意上面的这个代码：
<bean id="multipartResolver" class="com.zxm.fileupload.UploadCommonsMultipartResolver">
<!-- 默认编码 -->
<property name="defaultEncoding" value="utf-8" />
<!-- 文件大小最大值 -->
<property name="maxUploadSize" value="10485760000" />
<!-- 内存中的最大值 -->
<property name="maxInMemorySize" value="40960" />
</bean>com.zxm.fileupload.UploadCommonsMultipartResolver这个是自己复写的，下面我会贴出代码。
（5）UploadCommonsMultipartResolver的实现：
package com.zxm.fileupload;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
public class UploadCommonsMultipartResolver extends CommonsMultipartResolver
@Override
protected MultipartParsingResult parseRequest(HttpServletRequest request)
throws MultipartException
HttpSession session = request.getSession();
String encoding = "utf-8";
FileUpload fileUpload = prepareFileUpload(encoding);
UploadListener uploadListener = new UploadListener(session);
fileUpload.setProgressListener(uploadListener);
try
List<FileItem> fileItem = ((ServletFileUpload)fileUpload).parseRequest(request);
return parseFileItems(fileItem, encoding);
catch (FileUploadBase.SizeLimitExceededException ex)
// TODO Auto-generated catch block
throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
catch (FileUploadException ex)
// TODO: handle exception
throw new MultipartException("Could not parse multipart servlet request",ex);
看完上面这个代码应该可以知道了，复写parseRequest方法的原因是，在这个方法里面实现对文件上传的监听：
FileUpload fileUpload = prepareFileUpload(encoding);
UploadListener uploadListener = new UploadListener(session);
fileUpload.setProgressListener(uploadListener);（6）好了，最后一步骤，文件上传Controller的实现（TestController.java）：
package com.zxm.controller;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Date;
import java.util.Iterator;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.commons.io.FileUtils;
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.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import com.zxm.bean.User;
import com.zxm.fileupload.UploadCommonsMultipartResolver;
import com.zxm.fileupload.UploadStatus;
@Controller
@RequestMapping("/SpringMVC006")
public class TestController
/*
* 通过流的方式上传文件
* @RequestParam("file") 将name=file控件得到的文件封装成CommonsMultipartFile 对象
*/
@RequestMapping("fileUpload")
public String fileUpload(@RequestParam("file") CommonsMultipartFile file) throws IOException
//用来检测程序运行时间
long startTime=System.currentTimeMillis();
System.out.println("fileName："+file.getOriginalFilename());
try
//获取输出流
OutputStream os=new FileOutputStream("E:/"+new Date().getTime()+file.getOriginalFilename());
//获取输入流 CommonsMultipartFile 中可以直接得到文件的流
InputStream is=file.getInputStream();
byte[] bts = new byte[1024];
//一个一个字节的读取并写入
while(is.read(bts)!=-1)
os.write(bts);
os.flush();
os.close();
is.close();
catch (FileNotFoundException e)
// TODO Auto-generated catch block
e.printStackTrace();
long endTime=System.currentTimeMillis();
System.out.println("方法一的运行时间："+String.valueOf(endTime-startTime)+"ms");
return "/success";
/*
* 采用file.Transto 来保存上传的文件
*/
@RequestMapping("fileUpload2")
public String fileUpload2(@RequestParam("file") CommonsMultipartFile file) throws IOException
long startTime=System.currentTimeMillis();
System.out.println("fileName："+file.getOriginalFilename());
String path="E:/"+new Date().getTime()+file.getOriginalFilename();
File newFile=new File(path);
//通过CommonsMultipartFile的方法直接写文件（注意这个时候）
file.transferTo(newFile);
long endTime=System.currentTimeMillis();
System.out.println("方法二的运行时间："+String.valueOf(endTime-startTime)+"ms");
return "/success";
/*
*采用spring提供的上传文件的方法
*/
@RequestMapping("springUpload")
public String springUpload(HttpServletRequest request) throws IllegalStateException, IOException
long startTime=System.currentTimeMillis();
//将当前上下文初始化给 CommonsMutipartResolver （多部分解析器）
CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
request.getSession().getServletContext());
//检查form中是否有enctype="multipart/form-data"
if(multipartResolver.isMultipart(request))
//将request变成多部分request
MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
//获取multiRequest 中所有的文件名
Iterator iter=multiRequest.getFileNames();
while(iter.hasNext())
//一次遍历所有文件
MultipartFile file=multiRequest.getFile(iter.next().toString());
if(file!=null)
String path="E:/springUpload"+file.getOriginalFilename();
//上传
file.transferTo(new File(path));
long endTime=System.currentTimeMillis();
System.out.println("方法三的运行时间："+String.valueOf(endTime-startTime)+"ms");
return "/success";
@RequestMapping("/fileUpload3.do")
public String fileUpload3(@RequestParam(value="file",required= false) MultipartFile[] files,HttpSession session,User user) throws IOException
long startTime=System.currentTimeMillis();
System.out.println(files.length);
System.out.println(user.getUsername()+"===="+user.getPassword());
if(files!=null&&files.length>0)
//循环获取file数组中得文件
for(int i = 0;i<files.length;i++)
MultipartFile file = files[i];
//这个方法最慢
/*FileUtils.writeByteArrayToFile(new File("E:\\\\"+file.getOriginalFilename()), file.getBytes());*/
//这个方法最快
file.transferTo(new File("E:\\\\"+file.getOriginalFilename()));
//这个方法其次
/*OutputStream os=new FileOutputStream("E:/"+file.getOriginalFilename());
//获取输入流 CommonsMultipartFile 中可以直接得到文件的流
InputStream is=file.getInputStream();
byte[] bts = new byte[2048];
//一个一个字节的读取并写入
while(is.read(bts)!=-1)
os.write(bts);
os.flush();
os.close();
is.close();*/
long endTime=System.currentTimeMillis();
System.out.println("方法四的运行时间："+String.valueOf(endTime-startTime)+"ms");
return "success";
/**
* 这里是获取上传文件状态信息的访问接口
* @param session
* @return
*/
@ResponseBody
@RequestMapping("getStatus.do")
public UploadStatus getStatus(HttpSession session)
return (UploadStatus)session.getAttribute("upload_status");
代码中提供了五个办法，在这里简单说明一下：
- fileUpload：单文件上传，通过流的方式上传文件。
- fileUpload2：单文件上传，采用file.Transto 来保存上传的文件。
- springUpload：多文件上传，但是注意这个是在没有使用自己覆写方法后的对象（UploadCommonsMultipartResolver），在使用原生对象（CommonsMultipartResolver）的时候可用。
- fileUpload3：多文件上传，这个是我们在使用我们自己复写方法后的对象的情况下进行调用的访问接口。
- getStatus：获取文件上传状态信息。
（7）最后一步， 前台实现：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="from" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文件上传</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function showStatus()
var intervalId = setInterval(function()
$.get("SpringMVC006/getStatus.do",,function(data,status)
console.log(data);
var percent = data.percent;
if(percent >= 100)
clearInterval(intervalId);
percent = 100;//不能大于100
$("#result").width(percent+"%");
,"json");
,100);
</script>
</head>
<body>
<!-- -->
<form action="SpringMVC006/fileUpload3.do" method="POST" enctype="multipart/form-data" onsubmit="showStatus()">
<div id="uploadDiv">
<input type="file" name="file" multiple id="uploadFile"/>
</div>
<input type="submit" value="提交"/>
</form>
<div style="border:black solid 1px; width: 800px;height: 10px;">
<div id="result" style="height: 8px;background: green;position: relative; top: 1px;left: 1px;"></div>
</div>
</body>
</html>3、Spring MVC Ajax上传文件
用Ajax上传文件也很简单，前台页面变一下：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="from" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文件上传</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function showStatus()
var intervalId = setInterval(function()
$.get("SpringMVC006/getStatus.do",,function(data,status)
console.log(data);
var percent = data.percent;
if(percent >= 100)
clearInterval(intervalId);
percent = 100;//不能大于100
$("#result").width(percent+"%");
,"json");
,100);
function ajaxtSubmit()
var files = document.getElementById("uploadFile").files;
alert(files.length);
var formData = new FormData();
for(var i=0以上是关于Spring MVC带进度条的多文件上传的主要内容，如果未能解决你的问题，请参考以下文章