springMVC实现前台带进度条文件上传的示例代码

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用HTML5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下:

详细实现如下:

1、mvc-config.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: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.xsd
 http://www.springframework.org/schema/context
 http://www.springframework.org/schema/context/spring-context-3.2.xsd
 http://www.springframework.org/schema/mvc
 http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

<!-- 注解扫描包 -->
 <context:component-scan base-package="com.yunfang.banks.controllers" />

<!-- 开启注解 -->
 <mvc:annotation-driven />
 <!-- 不拦截静态资源 -->
 <mvc:default-servlet-handler />
 <mvc:interceptors>
   <mvc:interceptor>
     <mvc:mapping path="/js/" />
     <mvc:mapping path="/js/**" />
     <bean class="com.yunfang.banks.intreceptor.MyInterceptor"></bean>
   </mvc:interceptor>
 </mvc:interceptors>
 <mvc:interceptors>
   <bean class="com.yunfang.banks.intreceptor.MyInterceptor"></bean>
 </mvc:interceptors>
 <!-- 静态资源(js/image)的访问 -->
 <mvc:resources location="/js/" mapping="/js/**" />

<!-- 定义视图解析器 -->
 <bean id="viewResolver"
   class="org.springframework.web.servlet.view.InternalResourceViewResolver">
   <property name="prefix" value="/"></property>
   <property name="suffix" value=""></property>
 </bean>

<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
   <property name="messageConverters">
     <list>
       <!--下载的时候专用 -->
       <bean
         class="org.springframework.http.converter.ByteArrayHttpMessageConverter" />
       <bean id="jsonHttpMessageConverter"
         class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
         <property name="supportedMediaTypes">
           <list>
             <value>text/plain;charset=UTF-8</value>
           </list>
         </property>
       </bean>
     </list>
   </property>
 </bean>
 <!-- 配置springMVC处理上传文件的信息,自定义上传,带进度条 -->
 <bean id="multipartResolver" class="com.yunfang.banks.listener.CustomMultipartResolver">
     <property name="defaultEncoding" value="utf-8" />
   <property name="maxUploadSize" value="10000000000" />
 </bean>
   <!--    
   <bean id="multipartResolver"
   class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <property name="defaultEncoding" value="utf-8" />
   <property name="maxUploadSize" value="10485760000" />
   <property name="maxInMemorySize" value="40960" />
 </bean>  
   -->

</beans>

2、实体工具类：Progress.Java

package com.yunfang.banks.listener;

public class Progress {

private long pBytesRead;
 private long pContentLength;
 private long pItems;
 public long getpBytesRead() {
   return pBytesRead;
 }
 public void setpBytesRead(long pBytesRead) {
   this.pBytesRead = pBytesRead;
 }
 public long getpContentLength() {
   return pContentLength;
 }
 public void setpContentLength(long pContentLength) {
   this.pContentLength = pContentLength;
 }
 public long getpItems() {
   return pItems;
 }
 public void setpItems(long pItems) {
   this.pItems = pItems;
 }
 @Override
 public String toString() {
   return "Progress [pBytesRead=" + pBytesRead + ", pContentLength="
       + pContentLength + ", pItems=" + pItems + "]";
 }

}

3、文件上传进度监听类：FileUploadProgressListener.java

package com.yunfang.banks.listener;

import javax.servlet.http.HttpSession;
import org.apache.commons.fileupload.ProgressListener;
import org.springframework.stereotype.Component;

@Component
public class FileUploadProgressListener implements ProgressListener {
 private HttpSession session;
 public void setSession(HttpSession session){
   this.session=session;
   Progress status = new Progress();//保存上传状态
   session.setAttribute("status", status);
 }
 public void update(long pBytesRead, long pContentLength, int pItems) {
   Progress status = (Progress) session.getAttribute("status");
   try {
     Thread.sleep(5);
   } catch (InterruptedException e) {
     e.printStackTrace();
   }
   status.setpBytesRead(pBytesRead);
   status.setpContentLength(pContentLength);
   status.setpItems(pItems);
   //System.out.println(">>>>>>>>>>>>>>>>>>>>"+status);

}

}

4、自定义扩展org.springframework.web.multipart.commons.CommonsMultipartResolver类，重写public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException方法：

CustomMultipartResolver.java

package com.yunfang.banks.listener;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUpload;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.FileUploadException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.multipart.MaxUploadSizeExceededException;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

public class CustomMultipartResolver extends CommonsMultipartResolver {
 @Autowired
 private FileUploadProgressListener progressListener;

public void setFileUploadProgressListener(
     FileUploadProgressListener progressListener) {
   this.progressListener = progressListener;
 }

@Override
 @SuppressWarnings("unchecked")
 public MultipartParsingResult parseRequest(HttpServletRequest request)
     throws MultipartException {
   String encoding = determineEncoding(request);
   FileUpload fileUpload = prepareFileUpload(encoding);
   progressListener.setSession(request.getSession());
   fileUpload.setProgressListener(progressListener);
   try {
     List<FileItem> fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
     return parseFileItems(fileItems, encoding);
   }
   catch (FileUploadBase.SizeLimitExceededException ex) {
     throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
   }
   catch (FileUploadException ex) {
     throw new MultipartException("Could not parse multipart servlet request", ex);
   }
 }

}

5、uploadController.java

@RequestMapping("UserControllers/progress")
public void uploadFile(HttpServletRequest request,HttpServletResponse response,
           @RequestParam("file") CommonsMultipartFile file) throws IOException {
  response.setContentType("text/html");
  response.setCharacterEncoding("GBK");
  PrintWriter out;
  boolean flag = false;
  if (file.getSize() > 0) {
    //文件上传的位置可以自定义
    flag = FileUploadUtil.upLoadFile(file, request);
  }
  out = response.getWriter();
  if (flag == true) {
   out.print("1");
  } else {
   out.print("2");
  }
}

6、FileUploadUtil.java

import java.io.File;

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.multipart.MultipartFile;

public class FileUploadUtil {

public static Boolean uploadFile(HttpServletRequest request, MultipartFile file) {
    System.out.println("开始");
    String path = request.getSession().getServletContext().getRealPath("upload");
    String fileName = file.getOriginalFilename();
    System.out.println(path);
    File targetFile = new File(path, fileName);
    if (!targetFile.exists()) {
      targetFile.mkdirs();
    }
    // 保存
    try {
      file.transferTo(targetFile);
      return true;
    } catch (Exception e) {
      e.printStackTrace();
      return false;
    }

}

}

7、前台页面

<％@ page language="java" import="java.util.*" pageEncoding="Utf-8"％>
<％
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
     + request.getServerName() + ":" + request.getServerPort()
     + path + "/";
％>

<!DOCTYPE html>
<html>
<head>
<base href="<％=basePath％>">

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="css/bootstrap.min.css" rel="stylesheet">

<style type="text/css">
.file-box {
 position: relative;
 width: 340px
}

.txt {
 height: 22px;
 border: 1px solid #cdcdcd;
 width: 180px;
 vertical-align: middle;
 margin: 0;
 padding: 0
}

.btn {
 border: 1px solid #CDCDCD;
 height: 24px;
 width: 70px;
 vertical-align: middle;
 margin: 0;
 padding: 0
}

.file {
 position: absolute;
 top: 0;
 right: 80px;
 height: 24px;
 filter: alpha(opacity :  0);
 opacity: 0;
 width: 260px;
 vertical-align: middle;
 margin: 0;
 padding: 0
}
</style>
<％--<script type="text/javascript">
   function myInterval()
   {
     $("#progress").html("");
     $.ajax({
       type: "POST",
       url: "<％=basePath％>UserControllers/getSessions",
     data : "1=1",
     dataType : "text",
     success : function(msg) {
       var data = msg;
       console.log(data);
       $("#pdiv").css("width", data + "％");
       $("#progress").html(data + "％");
     }
   });
 }
 function autTime() {
   setInterval("myInterval()", 200);//1000为1秒钟
 }
</script>

--％>
<script type="text/javascript">
 function UpladFile() {
   var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
   var FileController = "UserControllers/progress"; // 接收上传文件的后台地址  
   // FormData 对象---进行无刷新上传
   var form = new FormData();
   form.append("author", "hooyes"); // 可以增加表单数据
   form.append("file", fileObj); // 文件对象
   // XMLHttpRequest 对象
   var xhr = new XMLHttpRequest();
   xhr.open("post", FileController, true);
   xhr.onload = function() {
     alert("上传完成!");
     //$('#myModal').modal('hide');
   };
       //监听progress事件
   xhr.upload.addEventListener("progress", progressFunction, false);
   xhr.send(form);
 }
 function progressFunction(evt) {

var progressBar = document.getElementById("progressBar");

var percentageDiv = document.getElementById("percentage");

if (evt.lengthComputable) {

progressBar.max = evt.total;

progressBar.value = evt.loaded;

percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100)
         + "％";

}

}
</script>

</head>

<body style="width: 80％;height: 80％;margin: 0px auto;">
 <div class="row bootstrap-admin-no-edges-padding">
   <div class="col-md-12">
     <div class="panel panel-default">
       <div class="panel-heading">
         <div class="text-muted bootstrap-admin-box-title">文件管理</div>
       </div>
       <div class="bootstrap-admin-panel-content">
         <button class="btn btn-primary btn-lg" data-toggle="modal"
           data-target="#myModal">上传</button>
         <input type="text" id="test">
       </div>
     </div>
   </div>
 </div>

<!-- 模态框（Modal） -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal"
           aria-hidden="true">×</button>
         <h4 class="modal-title" id="myModalLabel">文件上传进度</h4>
       </div>
       <div class="modal-body">
         <progress id="progressBar" value="0" max="100"
           style="width: 100％;height: 20px; "> </progress>
         <span id="percentage" style="color:blue;"></span> <br>
         <br>
         <div class="file-box">
           <input type='text' name='textfield' id='textfield' class='txt' />
           <input type='button' class='btn' value='浏览...' /> <input
             type="file" name="file" class="file" id="file" size="28"
             onchange="document.getElementById('textfield').value=this.value" />
           <input type="submit" name="submit" class="btn" value="上传"
             onclick="UpladFile()" />

</div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">关闭
         </button>
       </div>
     </div>
     <!-- /.modal-content -->
   </div>
   <!-- /.modal -->
 </div>
 <script type="text/javascript"
   src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
</body>
</html>