JQuery-Datei-Upload (blueimp) mit einer benutzerdefinierten Fortschrittsbalken

Question

Ich fange gerade mit blueimp JQuery-Datei hochladen und für Designzwecke wollte ich eine kreisförmige Fortschrittsbalken integrieren.

Ich bin mit JQuery unerfahren, aber ich habe meine Hände auf ein kreisförmiges Fortschrittsbalkenskript gelegt, das einfach und genau das tut, wonach ich gesucht habe.

Mein Problem ist, ich kann nicht herausfinden, wie Sie es in JQuery File Upload integrieren.

Hier ist, wie die Standard-Fortschrittsbalken sieht aus wie in 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> 

Und hier bin ich, was für meine individuelle Fortschrittsbalken:

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

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

Also, was ich suche ist eine Möglichkeit, um JQueryFU den Wert meiner benutzerdefinierten Fortschrittsbalken (anstelle der 0,75 manuell festgelegt) das gleiche für seine ursprüngliche Fortschrittsleiste festlegen. Wie kann ich das erreichen?

Ich bin mir nicht ganz sicher, ob ich das gut erklären werde, bitte lassen Sie es mich wissen, wenn weitere Details erforderlich sind. Danke für Ihre Hilfe.

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