bootstrap进度条

<div ></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

相关文章: