zoukankan      html  css  js  c++  java
  • js 实时获取后台数据 Spring

      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

  • 相关阅读:
    mac 使用指南
    客服系统引用方案
    CSS中margin和padding的区别
    NuGet学习笔记(1)——初识NuGet及快速安装使用
    百度搜索这些词:(百度搜索特效,好玩)
    sql语言:如何查询字符串某个字符的个数?
    Sql日期时间格式转换
    SQL获取当前时间(日期)
    Redis快速入门:初识Redis
    选择Key-Value Store
  • 原文地址:https://www.cnblogs.com/jiahaoJAVA/p/8027807.html
Copyright © 2011-2022 走看看