帶有自定義進度條的jQuery File Upload（blueimp）

Question

我剛剛開始使用blueimp的JQuery File Upload，出於設計目的，我希望合並一個圓形進度條。

我沒有JQuery的經驗，但是我確實將手放在了一個循環進度條腳本上，該腳本可以簡單，准確地完成我要查找的內容。

我的問題是我不知道將其合並到JQuery File Upload中的方法。

這是默認進度條在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" }
    });
}