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

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

1 个答案: