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

SSM要想实现文件上传，需要在Spring-MVC.xml文件里添加如下配置
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 <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>  <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">  <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>  <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"; }
效果图

多文件上传时，进度条进度为所有文件总进度。

这个进度为写入tomcat的temp文件夹内的进度，到达百分之百后才从temp文件夹移至目标路径。

参考网页地址：https://www.jb51.net/article/103365.htm
<https://www.jb51.net/article/103365.htm>

热门工具换一换