Question

我正在尝试使用带有valum文件上传插件的jquery ui进度条。代码：

   <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>

的html

以下代码将每隔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属性。

如何使用jquery ui进度条？

3 个答案: