js 实时获取后台数据 Spring

  bootstrap进度条

<div id="Blenght" class="progress progress-striped" style="display:none;width: 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="width: 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