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");
// 恢復進度條的狀態(tài)
//背景成綠色
$(".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);
//創(chuàng)建formData對象 初始化為form表單中的數(shù)據(jù)
//需要添加其他數(shù)據(jù) 就可以使用 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事件的處理函數(shù)
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是回調函數(shù)的函數(shù)名
回調函數(shù)如下
//上傳進度回調函數(shù)
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;
}
即可完成上傳時觸發(fā)回調函數(shù)更新頁面數(shù)據(jù)從而修改進度條的值
下面是完整代碼:
<!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 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");
// 恢復進度條的狀態(tài)
//背景成綠色
$(".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);
//創(chuàng)建formData對象 初始化為form表單中的數(shù)據(jù)
//需要添加其他數(shù)據(jù) 就可以使用 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事件的處理函數(shù)
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");
}
})
}
//上傳進度回調函數(shù)
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>
