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

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

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

 

 

js代码 

//导入circleChart.js


//初始化进度条插件
            $('.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代码

    


上传

 

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