javascript - 如何使用jquery ui 进度条？

Question

我正在尝试将 jquery ui 进度条与 value 文件上传插件一起使用。代码 ：

   <div id="pb"></div>

       .....
    onProgress: function (id, fileName, uploadedBytes, totalBytes) {
        $("#pb").progressbar({ value : uploadedBytes });
    },
    . .... .

但这不起作用，任何人都可以指导我，如何正确使用进度条？

Answer 1

您需要以百分比计算上传的字节数。

var percentValue = (uploadedBytes / totalBytes) * 100

$("#pb").progressbar({
        value: percentValue
});

Answer 2

假设您有一个带有<div id="progressbar"></div>

以下代码将每 10 毫秒遍历一次进度条，直到达到 100：

<script type="text/javascript">
    var i = 0; //variable used to count the steps
    function myclick(){ // function called on a button click for example
        var int = self.setInterval(
            function(){
                if (i == 100) window.clearInterval(int);
                $( "#progressbar" ).progressbar("value", i);
                i++;
            }
            , 10);
    }

    $('button').button().click(myclick); // a button element which will 
                                         // start the progress bar
    $( "#progressbar" ).progressbar(); //this part sets up the progressbar
</script>

注意：其他答案也是有效的，我只发布了这个答案作为 IMO 尚未回答的问题的“如何正确使用进度条”部分的答案。

Answer 3

进度条以百分比显示。您需要转换uploadedBtyes为 %，totalBytes然后将其作为数字传递给选项的 value 属性。