• 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

  • 相关阅读:
    vuePress搭建属于自己的站点。
    webpack打包取消所有的console.log语句
    浏览器使用input复制不成功解决办法。
    腾讯地图marker中大小的控制和事件绑定。
    VUE开发公众号IOS9白屏问题
    head.s 简单分析
    linux内核初始化控制流
    一直小菜鸟在学习飞翔。
    8种主要排序算法的C#实现
    我的Jquery参考词典
  • 原文地址:https://www.cnblogs.com/jiahaoJAVA/p/8027807.html
Copyright © 2020-2023  润新知