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;i<files.length;i++){ formData.append("file",files[i]); } formData.append("username","zxm"); formData.append("password","123456"); $.ajax({ type:"post", url:"SpringMVC006/fileUpload3.do", data:formData, processData : false, contentType : false, /*beforeSend: function(request) { request.setRequestHeader("filePath", file_path); }, */ success:function(data){ }, error:function(e){ } }) showStatus(); } </script> </head> <body> <!-- action="SpringMVC006/fileUpload3.do" --> <form 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> <button onclick="ajaxtSubmit()">ajax提交</button> <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>

注意下面这个脚本代码，利用FormData()就可以进行数据传输

function ajaxtSubmit(){ var files = document.getElementById("uploadFile").files; alert(files.length); var formData = new FormData(); for(var i=0;i<files.length;i++){ formData.append("file",files[i]); } formData.append("username","zxm"); formData.append("password","123456"); $.ajax({ type:"post", url:"SpringMVC006/fileUpload3.do", data:formData, processData : false, contentType : false, /*beforeSend: function(request) { request.setRequestHeader("filePath", file_path); }, */ success:function(data){ }, error:function(e){ } }) showStatus(); }

效果如下：

4、Spring MVC 文件上传其它参数的提交

在上面的脚本方法中有没有发现这个语句：

formData.append("username","zxm"); formData.append("password","123456");

这是模拟提交两个数据，在我们的控制器访问方法中，也有这样的语句：

@RequestMapping("/fileUpload3.do") public String fileUpload3(@RequestParam(value="file",required= false) MultipartFile[] files,HttpSession session,User user)........

这个方法中有个User user这样的参数，那么在提交的时候可以直接调用这个参数来获取到我们所提交上去的username和password数据。至于这和User对象，只是一个普通的POJO对象，有两个属性username和password。 源码已将上传，需要的话请下载，http://pan.baidu.com/s/1boWJKo3