如何使用jQuery UI進度條？

Question

我正在嘗試將jQuery ui進度欄與valum文件上傳插件一起使用。 代碼：

   <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 ，然后通過這個作為一個數量的期權價值屬性。