bootstrap进度条
<div id="Blenght" class="progress progress-striped" style="display:none; 300px;height: 15px;margin-left:45px;margin-bottom: 1px;">
<div id="my-bar-success" class="progress-bar progress-bar-success my-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style=" 0%;">
</div>
<div id="countNum" class="len-countNum">
<em id="style-em-1" class="em-style"></em><em id="style-em-2" class="em-style"></em></div>
</div>
var formData = new FormData(document.getElementById('表单id'));
var xhr = new XMLHttpRequest();
xhr.open('post', 'getbar', true); //getbar为请求路径 请求获取后台实时改变的session值 上传案例
xhr.upload.addEventListener("progress", progressZipFilesFunction, false);//progressZipFilesFunction 回调函数
xhr.send(formData);
function progressZipFilesFunction(evt) {
if (evt.lengthComputable) {
var bRead = evt.loaded;
var cLength = evt.total;
var mBRead = Math.floor(bRead / 1024 / 1024); //实时上传的MB 取整
var aRate = bRead / cLength * 100;
var mCLength = Math.floor(cLength / 1024 / 1024); //视频大小
$("#style-em-1").html(mBRead + "M/");
$("#style-em-2").html(mCLength + "M");
aRate = aRate.toFixed(2);
$("#my-bar-success").css("width", aRate + "%");
if(bRead==cLength){
layer.alert("成功", {
icon: 1
},
function() {
$("#myModal2").modal("hide");
window.location.reload();
});
}
}
}3