SpringMVC之文件上传（进度条显示）_sprigmvc 带进度条文件上传-优快云博客

本文介绍如何使用Spring和Apache Commons FileUpload库实现文件上传过程中的进度监听，包括自定义MultipartResolver、编写ProgressListener和Controller来获取上传进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实现org.apache.commons.fileupload.ProgressListener接口


import javax.servlet.http.HttpSession;
 
import org.apache.commons.fileupload.ProgressListener;
import org.springframework.stereotype.Component;
 
import com.chinalife.cip.web.multipart.model.Progress;
 
@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);
	}
 
	/*
	 * pBytesRead 到目前为止读取文件的比特数 pContentLength 文件总大小 pItems 目前正在读取第几个文件
	 */
	public void update(long pBytesRead, long pContentLength, int pItems) {
		Progress status = (Progress) session.getAttribute("status");
		status.setpBytesRead(pBytesRead);
		status.setpContentLength(pContentLength);
		status.setpItems(pItems);
	}
 
}

2、扩展org.springframework.web.multipart.commons.CommonsMultipartResolver类

重写public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException方法


import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
 
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.apache.commons.fileupload.servlet.ServletFileUpload;
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;
 
import com.chinalife.cip.web.multipart.listener.FileUploadProgressListener;
 
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);
		}
	}
}

3、mvc命名空间声明


<bean id="multipartResolver" class="com.chinalife.cip.web.multipart.CustomMultipartResolver">
	<property name="maxUploadSize" value="50000000" />
</bean>

4、获取文件controller编写


@RequestMapping(...)
public String uploadFile(@RequestParam(value = "file") MultipartFile... files) throws IOException {
	for (MultipartFile f : files) {
		if (f.getSize() > 0) {
			File targetFile = new File("目标文件路径及文件名");
			f.transferTo(targetFile);//写入目标文件
		}
	}
	return "...";
}

5、文件进度controller编写


import java.util.Map;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.SessionAttributes;
 
import com.chinalife.cip.web.multipart.model.Progress;
 
@Controller
@SessionAttributes("status")
public class ProgressController {
 
	@RequestMapping(value = "/upfile/progress", method = RequestMethod.POST )
	@ResponseBody
	public String initCreateInfo(Map<String, Object> model) {
		Progress status = (Progress) model.get("status");
		if(status==null){
			return "{}";
		}
		return status.toString();
	}
}

6、最后

html及js脚本就不在此赘述了，网上有很多例子，给出一个示例。


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>文件上传</title>
	<script type="text/javascript"  src="${ctx}/js/jquery-2.1.4/jquery-2.1.4.js"></script>
	<script type="text/javascript" src="${ctx}/js/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${ctx}/js/bootstrap-3.3.5/css/bootstrap.min.css" />
	<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秒钟
		} 
		--%>
		
		function UpladFile() {
			var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
			var FileController = "${ctx}/upload/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');
			};
			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>
 
</body>
</html>