SSM+Bootstrap+Ajax实现页面无刷新带进度条多文件上传（超详细备注）

最新推荐文章于 2024-08-14 01:48:08 发布

New_Yao

最新推荐文章于 2024-08-14 01:48:08 发布

阅读量2.5k

点赞数

分类专栏： JAVA 文章标签： Ajax 进度条

本文链接：https://blog.csdn.net/New_Yao/article/details/81630569

版权

JAVA 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

SSM要想实现文件上传，需要在Spring-MVC.xml文件里添加如下配置

	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 设置上传文件最大尺寸，单位为B -->
		<property name="maxUploadSize" value="42006529160" />
	</bean>

需要导入两个jar包

下面是jsp页面:由于引用的全是网络上的cdn，需要联网后食用！

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

</head>
<body>
	<form id="uploadForm">

		<!-- 由于使用了ssm框架，后台接收是用name绑定的，注意name和后台一致 -->
		<input type="file" id="file" name="file" /> <input type="file"
			id="file" name="file" /> <input type="button" onclick="UpladFile()"
			value="上传" />
	</form>
	<div class="progress" style="width: 40%">
		<div id="progressactive"
			class="progress-bar progress-bar-striped active" role="progressbar"
			aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
			style="width: 0%"></div>
	</div>
	<span id="sr-only"></span>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>
<script type="text/javascript">
	function UpladFile() {
		var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
		var FileController = "upload.do"; // 接收上传文件的后台地址 
		// FormData 对象
		var form = new FormData($("#uploadForm")[0]);//创建一个form对象
		// XMLHttpRequest 对象
		var xhr = new XMLHttpRequest();//创建XMLHttpRequest对象
		xhr.open("post", FileController, true);//打开连接，(访问类型，地址，是否异步)
		xhr.onload = function() {//请求完成后执行  里面可用
			if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
				alert(xhr.responseText);//后台返回的数据
			} else {
				alert("Request was unsuccessful: " + xhr.status);//状态
				//0	UNSENT (未打开),1	OPENED  (未发送),2 HEADERS_RECEIVED (已获取响应头),3	LOADING (正在下载响应体),4	DONE (请求完成)
			}
		};

		xhr.upload.addEventListener("progress", progressFunction, false);//添加上传监听器方法
		xhr.send(form);//发送请求
	}

	function progressFunction(evt) {

		var progressBar = document.getElementById("progressactive");//获取进度条对象
		var percentageDiv = document.getElementById("sr-only");//获取展示进度数据对象
		if (evt.lengthComputable) {
			var max = evt.total;//文件总大小
			var loaded = evt.loaded;//已上传文件大小
			console.log(max);
			progressBar.style.width = Math.round(loaded / max * 100) + "%";
			percentageDiv.innerHTML = Math.round(loaded / max * 100) + "%";
			if (evt.loaded == evt.total) {
				percentageDiv.innerHTML = "上传完成";
			}
		}

	}
</script>
</html>

后台controller方法

	@RequestMapping(value = "/upload.do", method = RequestMethod.POST)
	public String upload(HttpServletRequest request,
			@RequestParam("file") MultipartFile[] file, ModelMap model) {
		System.out.println("开始");
		String path = request.getSession().getServletContext()
				.getRealPath("upload");//获取当前项目下的upload
		for (int i = 0; i < file.length; i++) {
			
			String fileName = file[i].getOriginalFilename();//获取文件名
			// String fileName = new Date().getTime()+".jpg";//替换新名字
			System.out.println(path);
			File targetFile = new File(path, fileName);//判断文件是否存在，不存在则创建，可创建文件夹
			if (!targetFile.exists()) {
				targetFile.mkdirs();
			}
			
			// 保存
			try {
				//使用transferTo（dest）方法将上传文件写到服务器上指定的文件。
				file[i].transferTo(targetFile);//此方法在上传完成后才开始上传
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
//		model.addAttribute("fileUrl", request.getContextPath() + "/upload/"
//				+ fileName);
		return "index";
	}

效果图