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

  • 相关阅读:
    正则表达式(一个字符串翻转的例子)(http://www.cnblogs.com/hai98)
    电话号码正则表达式
    用哪种方法判断字符串为空更快速
    SQL内数据类型
    正则表达式基础(http://www.cnblogs.com/hai98)
    随机生成数
    C#源码 备份和恢复数据库
    ajax技术制作得在线歌词搜索功能
    ReadyGo新闻管理系统 1.5版 无任何使用限制
    最新完成的asp.net 2.0网站
  • 原文地址:https://www.cnblogs.com/jiahaoJAVA/p/8027807.html
Copyright © 2011-2022 走看看