カスタム進行状況バーを使用したJQueryファイルアップロード（blueimp）

Question

私はblueimpのJQueryファイルアップロードを開始しています。設計上、循環的なプログレスバーを組み込むことにしました。

私は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の代わりに）元のプログレスバーと同じように設定する方法。 どうすれば実現できますか？

私はこれをうまく説明しているとは確信していません。詳細については、お問い合わせください。ご協力いただきありがとうございます。

Answer 1

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" } 
    }); 
}