带有自定义进度条的JQuery文件上传（blueimp）

我刚刚开始使用blueimp的JQuery文件上传，并且为了设计目的，我想要合并一个圆形进度栏。带有自定义进度条的JQuery文件上传（blueimp）

我对JQuery没有经验，但是我确实把我的手放在了一个圆形的进度条脚本上，它完全符合我的要求。

我的问题是我不知道如何将它合并到JQuery文件上传。

这是默认的进度条看起来像在JQueryFU：

<div id="progress"> 
    <div class="bar" style="width: 0%;"></div> 
</div> 

<script> 
$(function() { 
    $('#fileupload').fileupload({ 
     dataType: 'json', 
     done: function (e, data) { 
      $.each(data.result.files, function (index, file) { 
       $('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '" width="150" height="150"/>'); 
       $('<span/>').text(file.name).appendTo(".upload-name"); 
      }); 
     }, 
     dropZone: $('#avatar-drop'), 
     replaceFileInput: false, 
     progressall: function (e, data) { // <-- progress-bar function starting here 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    } 
    }); 
}); 
</script>

在这里，我我用我的自定义进度栏的内容：

<div id="circle"></div> 

<script> 
$('#circle').circleProgress({ 
    value: 0.75, 
    size: 150, 
    fill: { color: "#60bbff" } 
    }); 
</script>

所以，我正在寻找的是一种让JQueryFU将自定义进度条的值（而不是0.75手动设置）设置为与原始进度条相同的方法。我该如何做到这一点？

我不完全确定我在解释这件事，请让我知道是否需要更多细节。谢谢你的帮助。

来源

2016-04-24 apatik

progressall: function (e, data) { // <-- progress-bar function starting here 
    var progress = data.loaded * 1.0/data.total; 
    $('#circle').circleProgress({ 
     value: progress, 
     size: 150, 
     fill: { color: "#60bbff" } 
    }); 
}

来源

2016-06-15 17:01:59

带有自定义进度条的JQuery文件上传（blueimp）

回答

相关问题