Tips for Twits

41 Responses to “JQuery Progress Bar 1.1”

1. Surt Says:
   October 6th, 2009 at 6:08 pm

   Hi there gaweee

   on my last reply i had a problem with the $_FILEs after submit. It was due to the target=”iframe
   now, without the target, of course, i can acess to files after page reload.

   Thx for all and sorry for bother!

2. Surt Says:
   October 6th, 2009 at 4:08 pm

   Hi,

   i am triying to add your scripts to an upload form. It works ok, but i can´t find the $_FILES after the upload completes.

   i am using your exact code:

   function beginUpload() {

   jQuery(”#uploadprogressbar”).fadeIn();

   var i = setInterval(function() {
   jQuery.getJSON(”/upload/” + progress_key, function(data) {
   if (data == null) {
   clearInterval(i);
   location.reload(true);
   return true;
   }
   var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
   jQuery(”#uploadprogressbar”).progressBar(percentage);
   });
   }, 1500);
   return true;
   }

   but when page reloads, using var_dump($_FILES) it returns nothing. Checking at the tmp folder on the server it looks like uploaded, but i can’t see it on $_FILES.
   Any workaround? I can’t think on nothing, except for the location.reload(true);

   my forms submits to the same place it comes action=”"

   Thx for all. Thats a good script

3. Julia Says:
   October 2nd, 2009 at 10:35 am

   Hi,
   I use your tool and so far it is working perfect. thanks for that
   my problem is now that i want to use it in a loop (php and mysql). i want to have an overview of user and their progress. the percentage of the user i got. but because i don’t know how many user i got, i wanted to ask if it is possible to still display a bar for every user. please help me
   Thanks
   Julia

4. Ben Dash Says:
   September 9th, 2009 at 3:19 pm

   Hi there,

   I qant to make this plugin work for my upload form, but it just doesn’t work. Does this need any extensions for php5 installed?
   Basically I tried the 2.0 version’s demo in Wamp Server (latest), but it didn’t work either. Can you point me in the right direction?

   Thanks and nice work,
   Regards,
   Ben

5. Typo3 Freelancer Says:
   September 9th, 2009 at 12:01 pm

   Hello,

   thanks … I have searching that progress bar plugin and this has me very helped.

6. James Says:
   July 14th, 2009 at 2:26 pm

   Hey I got this working. I ended up removing if(@$_POST['UPLOAD_IDENTIFIED'])
   exit();

   The reason I did this is because it is a hidden value and will always be ISSET() and will exit my my script.

   Thanks. nice script.

7. gaweee Says:
   July 13th, 2009 at 2:24 am

   Dude, relax man,
   comments are on moderation mode. Hence i have to approve it.
   if it stops at your move_upload_file method then its a PHP error, double check your $_FILES and call is_uploaded_file appropriately

8. James Says:
   July 13th, 2009 at 1:06 am

   why do you keep deleting my info im jsut looking for some guidance man?

9. James Says:
   July 12th, 2009 at 11:26 pm

   I have 3 files setup.

   form.php // has js and form

   upload.php // has my script to store things in the db and upload file
   progress.php // returns the json on uploadprogress
   Is that setup right?
   Seems to be working but it does not finish my upload.php script it happens to stop at the move_upload_file(); anything below that never gets done

   Any ideas? Thank you

10. Aurélien Says:
    July 11th, 2009 at 4:12 am

    i use this tips for my website, it’s greatful!
    thanks !

11. dun Says:
    July 10th, 2009 at 12:44 am

    how the hell do you get this working why would you not publish documentation lol

12. occupspreorma Says:
    June 14th, 2009 at 5:02 am

    Отлично,согласен с предыдущими высказываниями
    ^..^

13. Thalis K. Says:
    May 14th, 2009 at 6:17 am

    I like your progressbar. Elegant and light. They way it should be.
    Question: can it be used with values other than percentages?
    I wish to use it to show progress with regard to a preset value e.g. show progress on the way to achieving a goal value i.e. display something like 2500/7000. If not, is it too much to place such a feature request? TIA.

14. Jonne Zutt Says:
    April 28th, 2009 at 7:53 am

    Hi, nice work!
    I made one change, because I noticed in my environment (firefox 3.0.10 / Mac OSX 10.5.6)
    the line 111 (bar.css(”background-image”, “url(” + getBarImage(cpercentage, config)
    resulted in a download of the image file.
    This made firefox consume a lot of cpu for a long time.

    I changed it into:
    var curImg = bar.css(”background-image”);
    var curImgFile = curImg.substring(curImg.lastIndexOf(”/”));
    var newImg = “url(” + getBarImage(cpercentage, config) + “)”;
    var newImgFile = newImg.substring(newImg.lastIndexOf(”/”));
    if(curImgFile != newImgFile) {
    bar.css(”background-image”, newImg);
    }

    Note that ” if(curImg != newImg) ” was not enough because the start of the url got replaced.
    The code could be improved, e.g., by checking whether there is an “/” in the string, or other
    clever stuff.

    Hope it helps anyone,
    Jonne.

15. cuong Says:
    February 23rd, 2009 at 11:56 am

    Nice plug-in
    but i can’t use it to upload file.Why? Can you show me,please?

16. Tim Says:
    February 10th, 2009 at 9:53 am

    I’d also like to see it working with multiple colour regions i.e. 60 red

    They’d have to be manageable somehow of course.

    Great plugin though thanks!

    Tim

17. Asanka Dewage Says:
    December 5th, 2008 at 9:35 pm

    You may want to use $.getJSON (line 36) that way you don’t have to eval response, it will pass JSON straight to your function.

18. dr.emi Says:
    November 7th, 2008 at 1:57 pm

    hi… I trying to use this plugin. But I am not understand how to use it for loading page content indicator. It’s looks like using $(”#ajax_display”).ajaxStart(function() as indicator

19. Matt Says:
    October 29th, 2008 at 10:29 am

    Nice plug-in, thanks.

    Suggestion: would be cool to have a config option to specify various ranges that would change bg images. e.g. 0-33% = red, 34-66% = yellow, 67-100% = green.

20. Dave Says:
    October 14th, 2008 at 1:35 pm

    I really want to get this to work but I keep getting ‘undefined function uploadprogress_get_info’. I’m a complete newb when it comes to jquery, from scratch what modules/patches/updates/anything else do I need to get this working?

21. Derrick Says:
    September 26th, 2008 at 2:39 pm

    Nice pluggin but I found a small issue. You need to change line 110 to be as follows:

    else if (cpercentage < tpercentage) {

    I’m passing a calculation to the progressBar function and your current line somehow causes a very tight loop in the browser and causes it to hang.

22. Benjamin Says:
    August 15th, 2008 at 7:21 am

    I’ve been trying to get this progress bar working for the past 2-3 weeks. I have the PECL uploadprogress package installed on the server and have used an exact copy paste job of your code for php with the one change made to the javascript where it names the page.

    I’ve never dealt with ajax so is there anything that needs to be installed on the server that’s ajax related?

23. streams Says:
    August 11th, 2008 at 12:02 pm

    Just got this working with XT Ajax and Spring MVC. Great plugin, thanks

24. Jason Levine Says:
    August 7th, 2008 at 4:23 pm

    I wound up fixing the problem by adding an onComplete function to the plugin (to be run when the bar reaches the designated percentage) and by setting the interval for my “go to 100%” line to 100. In the onComplete function, I put my unblockUI statement. This meant that the blockUI code didn’t run until the Progress Bar code was done. Once I did this, the “Secure/Nonsecure” errors went away.

25. Jason Levine Says:
    August 7th, 2008 at 12:27 pm

    I’m having trouble with your Progress Bar 1.1 plugin and BlockUI. I first call blockUI to block out a page, then I use your Progress Bar plugin to show an ever increasing progress bar. Finally, I call unblockUI to remove the page block.

    Unfortunately, my page is SSL secured and IE6 is throwing a “page contains both secure and nonsecure items” error.

    You can see a demo of this error here: https://www.nehealth.com/SSLErrorTest/index.html

    (You don’t see the progress bar much because I just set it to 100 and then unblock the page.)

    Any ideas on how to fix this would be greatly appreciated.

26. Phil Says:
    August 3rd, 2008 at 9:46 pm

    I’ve tried hard but can’t get this too work… a clearer description / tutorial would be awesome.

    thanks so much for your work!

27. streams Says:
    August 3rd, 2008 at 2:03 pm

    This looks really nice. Is it possible to rewrite the php upload demo to JSP?

28. gaweee Says:
    July 30th, 2008 at 10:25 am

    Hey guys,
    many thanks for all the comments and sorry its taken me awhile to get to it. Just got back from a long vacation in japan. =)
    as per the contributions, i’ve updated the code to work with opera 9.5 I hope that helps!

29. Hudson Tavares Says:
    July 30th, 2008 at 9:13 am

    As Oxidiser reported above, the code isn’t working on Opera 9.5; it happens because you’ve write, at line 70 of jquery.progressbar.js:

    —
    this.text = $text;
    —

    object.text seems to be an alias for object.innerText on Opera (don’t ask me why, it doesn’t happen even on IE6!), so, instead of having a new object property called text on this, the code will work as if you have written this.innerText = $text.

    To fix it, replace the line 70 by
    this.oText = $text;

    and the line 101 by
    oText.html(” ” + Math.round(cpercentage) + “%”);

    And it will work properly.

30. Dominik Dzienia Says:
    July 25th, 2008 at 6:21 am

    i’ve just rewrited it to work with Opera 9.5

    you can find sourcecode at:
    http://www.dzienia.pl/jquery.progressbar.2.0.zip

    could anyone can add it to jQuery plugin repo?

31. John Says:
    July 22nd, 2008 at 3:10 pm

    Hello,

    Can you possibly fix this for Safari and Opera. Opera seems to be going crazy about:

    if(config.showText) text.html(” ” + Math.round(cpercentage) + “%”);

    Thank you!

32. wisnoe Says:
    July 16th, 2008 at 10:32 pm

    Nice script, but it’s not work with Opera 9.50

33. Rob Says:
    July 16th, 2008 at 8:15 pm

    Nice plugin!

    Have the same problem with Opera 9.51, does not seem to work. On your demo site I get [object Object] with Green and Yellow Bar without any progress, the Orange and Red bar do show progress..

34. Oxidiser Says:
    July 5th, 2008 at 6:18 am

    Nice work! Doesn’t seem to be working in opera 9.5 though.

35. gaweee Says:
    June 26th, 2008 at 4:05 am

    Thanks Ori! I cant seem to access your file? would you care to email it to me at gary [at] wits.sg ? I’d love to improve it

    yeah i would say the license is the same as jQuery itself. I’m just sharing code that i’ve written so that others dont have to..

    It will be always FREE and i do not expect any links back or credits. But they’d be greatly appreciated if given.

36. Ori Peleg Says:
    June 26th, 2008 at 1:50 am

    Hi,

    I love your plugin!
    I tried to add an issue to the jquery plugins site, but there was some error – it didn’t attach to your project.
    Anyway, it’s here:
    http://plugins.jquery.com/node/3037

    It includes a patch for something we needed.

    BTW – I couldn’t figure out what license you’re releasing your plugin under. Are you using the same license as jQuery itself? (http://docs.jquery.com/License)

37. Rodrigo Says:
    June 25th, 2008 at 12:17 pm

    No documentation, not simple to use.
    Try jQuery Progression plugin.

38. gaweee Says:
    June 24th, 2008 at 12:26 pm

    oops, forgot to point it out of the test script.
    fixed that

39. michele Says:
    June 24th, 2008 at 9:52 am

    strange, i cannot make it work

40. gaweee Says:
    June 24th, 2008 at 4:41 am

    as requested, check out the new progress bar for file uploads on the demo page!

    cheers!

41. michele Says:
    June 23rd, 2008 at 9:30 am

    Nice plugin, you should write an example on how to use it as file upload progress bar.

    I am trying to understand how to use it for that
    thanks

Leave a Reply