axios 获取上传进度_ajax axios 下载文件时如何获取进度条 process

html>

下载进度条

.containerBar{

width:521px;

border:1px solid #008fcd;

height:21px;

border-radius: 10px;

overflow: hidden;

}

#bar{

background:#008fcd;

float:left;

height:100%;

text-align:center;

line-height:150%;

}

#total{

margin-bottom:20px;

}

/* 加载中 */

#loading1{

padding:10px 0 0 80px;

height:32px;

}

#loading1 span{

position: absolute;

left: 40px;

}

.demo1 {

width: 4px;

height: 4px;

border-radius: 2px;

background: #008fcd;

float: left;

margin: 5px 3px;

animation: demo1 linear 1s infinite;

-webkit-animation: demo1 linear 1s infinite;

}

.demo1:nth-child(1){

animation-delay:0s;

}

.demo1:nth-child(2){

animation-delay:0.15s;

}

.demo1:nth-child(3){

animation-delay:0.3s;

}

.demo1:nth-child(4){

animation-delay:0.45s;

}

.demo1:nth-child(5){

animation-delay:0.6s;

}

@keyframes demo1

{

0%,60%,100% {transform: scale(1);}

30% {transform: scale(2.5);}

}

@-webkit-keyframes demo1

{

0%,60%,100% {transform: scale(1);}

30% {transform: scale(2.5);}

}

0%

正在生成码包

function getTimeNow(){//当前时间201909290420

var date = new Date();

var year = date.getFullYear();

var month = date.getMonth()+1;

var day = date.getDate();

var hour = date.getHours();

var minute = date.getMinutes();

var second = date.getSeconds();

let nowTime = year.toString()+addZero(month).toString()+addZero(day).toString()+addZero(hour).toString()+addZero(minute).toString()+addZero(second).toString()

return nowTime

}

function addZero(num){

if(num 

num = '0'+num

}else{

num = num

}

return num

}

function closeModal(){

$(".ivu-modal-body").empty();

$("#ivu-modal-dialog").hide();

};

$(function(){

var page_url = '';

var req = new XMLHttpRequest();

req.open("get", page_url, true);

$("#total").css('display','none');

req.addEventListener("progress", function (evt) {

console.log(evt)

if (evt.lengthComputable) {

$("#total").css('display','block');

$("#loading1").css('display','none')

var percentComplete = Number((evt.loaded / evt.total).toString().match(/^\d+(?:\.\d{0,2})?/));

console.log(percentComplete);

let bar = document.getElementById("bar")

console.log(bar)

if(bar != null && bar != 'bull'){

console.log(bar)

bar.style.width=(percentComplete * 100) + "%";

$("#total").html( Math.floor(percentComplete * 100) + "%");

}

if(percentComplete == 1){

setTimeout(function()  {

//下载完成要执行的操作

}, 500);

}

}

}, false);

req.responseType = "blob";

req.onreadystatechange = function () {

if (req.readyState === 4 && req.status === 200) {

var filename = params.noticeOrderNo+'_'+getTimeNow()+'.zip';

if (typeof window.chrome !== 'undefined') {

// Chrome version

var link = document.createElement('a');

link.href = window.URL.createObjectURL(req.response);

link.download = filename;

link.click();

} else if (typeof window.navigator.msSaveBlob !== 'undefined') {

// IE version

var blob = new Blob([req.response], { type: 'application/force-download' });

window.navigator.msSaveBlob(blob, filename);

} else {

// Firefox version

var file = new File([req.response], filename, { type: 'application/force-download' });

window.open(URL.createObjectURL(file));

}

}

};

req.send();

})