I am trying to use jquery ui progress bar with valum file upload plugin. Code :

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

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

But this is not working, can anybody pls guid me, how to use progress bar properly ?

I am trying to use jquery ui progress bar with valum file upload plugin. Code :

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

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

But this is not working, can anybody pls guid me, how to use progress bar properly ?

• javascript
• jquery
• jquery-ui

Share Improve this question Follow asked Sep 9, 2012 at 10:46 GauravGaurav 8,4871414 gold badges5757 silver badges9191 bronze badges 2

• not working is too broad of a description. It might just be unrelated errors stopping your script from working. – TigOldBitties Commented Sep 9, 2012 at 10:57
• Did my answer help you? Let me know the oute.. – ffffff01 Commented Sep 12, 2012 at 19:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Assuming you have an html with a <div id="progressbar"></div>

the following code will step through the progressbar once every 10 miliseconds untill it reaches 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>

Note: The other answers are also valid, I only posted this answer as an answer to "How to properly use a progressbar" part of the question which IMO has not been answered.

You need to calculate the amount of uploaded bytes in percent.

var percentValue = (uploadedBytes / totalBytes) * 100

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

The progress bar works in percentages. You will need to convert uploadedBtyes to a % of the totalBytes and then pass this as a number to the value property of the options.