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";
}效果图
多文件上传时，进度条进度为所有文件总进度。
这个进度为写入tomcat的temp文件夹内的进度，到达百分之百后才从temp文件夹移至目标路径。