body中添加如下代码
上传文件: <input type="file" name="file" id="myFile">
<button onclick="upload()">确认上传</button>
<div class="show_info">
文件信息:...
</div>
<div class="show_result">
返回结果:...
</div>
<button onclick="test()">测试按钮</button>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length"
style="width: 0%;">
<div class="progress-value" id="mt-progress-value">0%</div>
</div>
</div>
</div>
</div>
</div>
</div>
效果如下：
image.png
接下来是JS获取到上传的文件的相关信息
$(":file").change(function () {
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
url = window.URL.createObjectURL(file);
totalSize += size;
$(".show_info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);
console.log("ok");
// 恢复进度条的状态
//背景成绿色
$(".progress").css("background", "#262626");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "1"});
$("#mt-progress-value").html(0);
})
点击上传的事件
function upload() {
//背景恢复
$(".progress").css("background", "#262626");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "1"});
$("#mt-progress-value").html(0);
//创建formData对象 初始化为form表单中的数据
//需要添加其他数据 就可以使用 formData.append("property", "value");
var formData = new FormData();
var fileInput = document.getElementById("myFile");
var file = fileInput.files[0];
formData.append("file", file);
// ajax异步上传
$.ajax({
url: "http://localhost:1001/login/upload",
type: "POST",
data: formData,
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false, //必须false才会避开jQuery对 formdata 的默认处理
enctype: 'multipart/form-data',
xhr: function () {
//获取ajax中的ajaxSettings的xhr对象 为他的upload属性绑定progress事件的处理函数
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
//检查其属性upload是否存在
myXhr.upload.addEventListener("progress", resultProgress, false);
}
return myXhr;
},
success: function (data) {
console.log("aaa");
},
error: function (data) {
console.log("cccc");
}
})
}
注意重点：myXhr.upload.addEventListener("progress", resultProgress, false);
其中resultProgress是回调函数的函数名
回调函数如下
//上传进度回调函数
function resultProgress(e) {
if (e.lengthComputable) {
var percent = e.loaded / e.total * 100;
$(".show_result").html(percent + "%");
var percentStr = String(percent);
if (percentStr == "100") {
percentStr = "100.0";
}
percentStr = percentStr.substring(0, percentStr.indexOf("."));
$("#mt-progress-value").html(percentStr);
$("#mt-progress-length").css("width", percentStr + "%");
if (percentStr == "100") {
setTimeout(function () {
//背景成绿色
$(".progress").css("background", "#15AD66");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "0"});
}, 500);
}
}
这是前端的部分代码
下面是后端的部分代码
拦截器中添加请求头
response.setHeader("Access-Control-Allow-Origin", "*");
controller中添加对应的接口地址
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public Map<String, String> upload(
@RequestParam("file") MultipartFile file,
HttpServletResponse response,
HttpServletRequest request) {
// request.
response.setHeader("Access-Control-Allow-Origin", "*");
// request.
System.out.println("this is upload...");
Map<String, String> map = new HashMap<>();
map.put("aaa", "bbb");
return map;
}
即可完成上传时触发回调函数更新页面数据从而修改进度条的值
下面是完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.demo {
padding: 2em 0;
background: linear-gradient(to right, #2c3b4e, #4a688a, #2c3b4e);
}
.progress {
height: 25px;
background: #262626;
padding: 5px;
overflow: visible;
border-radius: 20px;
border-top: 1px solid #000;
border-bottom: 1px solid #7992a8;
margin-top: 50px;
}
.progress .progress-bar {
border-radius: 20px;
position: relative;
animation: animate-positive 2s;
}
.progress .progress-value {
display: block;
padding: 3px 7px;
font-size: 13px;
color: #fff;
border-radius: 4px;
background: #191919;
border: 1px solid #000;
position: absolute;
top: -40px;
right: -10px;
}
.progress .progress-value:after {
content: "";
border-top: 10px solid #191919;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
bottom: -6px;
left: 26%;
}
.progress-bar.active {
animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}
@-webkit-keyframes animate-positive {
0% {
width: 0;
}
}
@keyframes animate-positive {
0% {
width: 0;
}
}
</style>
<body>
上传文件: <input type="file" name="file" id="myFile">
<button onclick="upload()">确认上传</button>
<div class="show_info">
文件信息:...
</div>
<div class="show_result">
返回结果:...
</div>
<button onclick="test()">测试按钮</button>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" id="mt-progress-length"
style="width: 0%;">
<div class="progress-value" id="mt-progress-value">0%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var totalSize = 0;
$(":file").change(function () {
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
url = window.URL.createObjectURL(file);
totalSize += size;
$(".show_info").html("文件名：" + name + "<br>文件类型：" + type + "<br>文件大小：" + size + "<br>url: " + url);
console.log("ok");
// 恢复进度条的状态
//背景成绿色
$(".progress").css("background", "#262626");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "1"});
$("#mt-progress-value").html(0);
})
function upload() {
//背景恢复
$(".progress").css("background", "#262626");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "1"});
$("#mt-progress-value").html(0);
//创建formData对象 初始化为form表单中的数据
//需要添加其他数据 就可以使用 formData.append("property", "value");
var formData = new FormData();
var fileInput = document.getElementById("myFile");
var file = fileInput.files[0];
formData.append("file", file);
// ajax异步上传
$.ajax({
url: "http://localhost:1001/login/upload",
type: "POST",
data: formData,
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false, //必须false才会避开jQuery对 formdata 的默认处理
enctype: 'multipart/form-data',
xhr: function () {
//获取ajax中的ajaxSettings的xhr对象 为他的upload属性绑定progress事件的处理函数
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
//检查其属性upload是否存在
myXhr.upload.addEventListener("progress", resultProgress, false);
}
return myXhr;
},
success: function (data) {
console.log("aaa");
},
error: function (data) {
console.log("cccc");
}
})
}
//上传进度回调函数
function resultProgress(e) {
if (e.lengthComputable) {
var percent = e.loaded / e.total * 100;
$(".show_result").html(percent + "%");
var percentStr = String(percent);
if (percentStr == "100") {
percentStr = "100.0";
}
percentStr = percentStr.substring(0, percentStr.indexOf("."));
$("#mt-progress-value").html(percentStr);
$("#mt-progress-length").css("width", percentStr + "%");
if (percentStr == "100") {
setTimeout(function () {
//背景成绿色
$(".progress").css("background", "#15AD66");
//归零 隐藏
$("#mt-progress-length").css({"width": "0%", "opacity": "0"});
}, 500);
}
}
}
</script>
</html>
