springMVC是实现前台带进度条文件上传

<?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>

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 + "]";
	}
	
	
	
}

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);
		
	}
 
}

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);
		}
	}
	
}

@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");
     }
}

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;
		 }
 
	}
 ｝

<%@ 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"
							οnchange="document.getElementById('textfield').value=this.value" />
						<input type="submit" name="submit" class="btn" value="上传"
							οnclick="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>