关闭

SpringMVC之文件上传(进度条显示)

标签: spring mvc文件上传
4912人阅读 评论(1) 收藏 举报
分类:

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>


 

0
3
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

springMVC上传文件 带有进度条

文件上传,实现带进度条的文件上传
  • gooooooal
  • gooooooal
  • 2016-06-23 16:18
  • 1412

SpringMVC之文件上传(进度条显示)

1、实现org.apache.commons.fileupload.ProgressListener接口 import javax.servlet.http.HttpSession; import ...
  • zmx729618
  • zmx729618
  • 2016-06-02 12:48
  • 4912

SpringMVC上传文件进度显示

效果图: FileUploadController.java import java.io.File; import java.util.List; import javax.servl...
  • waysoflife
  • waysoflife
  • 2016-05-10 16:18
  • 2485

SpringMVC文件上传-进度条

  • 2014-05-05 15:01
  • 196KB
  • 下载

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

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置...
  • zmx729618
  • zmx729618
  • 2016-07-11 16:23
  • 8377

基于SpringMVC文件上传服务器端进度条实现

基于SpringMVC文件上传服务器端进度条实现 标签: <a href=...
  • Neil_Wesley
  • Neil_Wesley
  • 2016-06-07 19:14
  • 2615

servlet、struts2、springmvc中实现带进度条的文件上传

实现带进度条的文件上传的基本原理是这样的: 前台异步提交文件上传请求,然后每隔一段时间向服务器发送请求查询文件上传进度。 后台处理程序解析文件上传请求,并且每隔一段时间将上传进度保存在HttpSe...
  • WXLHATYY
  • WXLHATYY
  • 2012-10-26 21:45
  • 1766

servlet、struts2、springmvc中实现带进度条的文件上传

实现带进度条的文件上传的基本原理是这样的: 前台异步提交文件上传请求,然后每隔一段时间向服务器发送请求查询文件上传进度。 后台处理程序解析文件上传请求,并且每隔一段时间将上传进度保存在Ht...
  • jazywoo123
  • jazywoo123
  • 2012-12-14 23:05
  • 1018

Springmvc文件上传,带进度条

一、实现org.apache.commons.fileupload.ProgressListener接口 import javax.servlet.http.HttpSession; import...
  • u012959829
  • u012959829
  • 2015-03-24 00:45
  • 1118

FTP+SpringMVC+Uploadify实现带进度条多文件上传

由于长期做接口,从来都是研究数据库、字段、增删改。文件的上传下载有些接触,但是都是完全封装后的一个调用,很少接触那么深刻。那么,问题来了。之前忽然接到一个网站,其实很简单,就包括上传、下载、分页。但是...
  • u010810559
  • u010810559
  • 2015-05-15 11:51
  • 1824
    个人资料
    • 访问:1482549次
    • 积分:17010
    • 等级:
    • 排名:第678名
    • 原创:155篇
    • 转载:913篇
    • 译文:34篇
    • 评论:212条
    文章分类
    最新评论