JSP+circleChart.js实现上传进度条

最新推荐文章于 2023-07-13 17:29:18 发布

李三岁zt

最新推荐文章于 2023-07-13 17:29:18 发布

阅读量435

点赞数

本文链接：https://blog.csdn.net/weixin_41983883/article/details/113885250

版权

点击上传按钮，通过后台接口获取已上传文件数和上传文件总数的比例，显示进度条弹窗，通过定时器发送多次请求，直到文件上传完成，清除定时器，进度条对话框自动关闭。

circleChart.min.js资源在博客里有

js代码


//导入circleChart.js
<script src="${ctxStatic}/jquery-validation/1.11.1/lib/circleChart.min.js" type="text/javascript"></script>

//初始化进度条插件
            $('.circleChart').circleChart({
                color: "green",
                speed: 2000,
                size: 100,
                value: "",
                text: 0,
                onDraw: function (el, circle) {
                    circle.text(Math.round(circle.value) + "%"); // 根据value修改text
                },
            })

//点击按钮上传文件显示圆形进度条
$("upload").click(function(){

$.ajax({
  type:"POST",
  url:"${ctx}/ams/amsFileInfo/uploadProgress",//请求地址
  async:false,//设为同步请求
  dataType: "json",
  data:{importId:importId},//请求参数
  success:function (data) {
  var i = data.message.finishedCount / data.message.allCount;
  $(".tanchuang").css('display', 'block');
  $(".circleChart").circleChart({
     value: i * 100,
  });
  if(i >= 1){
    i=0;
    $(".circleChart").circleChart({
    onDraw:function(el,circle){
    circle.text('成功')
      },
    color:'#67ee3e'
  });
                                                        
  $(".tanchuang").show().delay(2000).fadeOut();
}
  $(".circleChart").circleChart({
    onDraw:function(el,circle){
      circle.text(Math.round(circle.value) + "%")
     },
    });
 }
 }
})

html代码

<style>
/*进度条弹窗*/
        .tanchuang {
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .3);
            z-index: 9999;
        }
        /*进度条*/
        #circle {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -50px;
        }

</style>



<body>
<div class="tanchuang">
    <div class="circleChart" id="circle"></div>
</div>
<div id="upload">上传</div>

</body>

通过点击上传按钮，发送请求，从后台获取已上传文件数和上传文件总数的比例，根据比例显示进度条

李三岁zt

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JSP+circleChart.js实现上传进度条

js代码//导入circleChart.js<script src="${ctxStatic}/jquery-validation/1.11.1/lib/circleChart.min.js" type="text/javascript"></script>//初始化进度条插件 $('.circleChart').circleChart({ color: "green", spee.
复制链接

扫一扫