Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JS upload image progress bar

    Hello every, I'm new here and I know i only have one post but I promise to stay active...

    Would anyone know a good code for a progress bar that is positioned in the center of an image every time it is used... I also don't want a set number of frames I want it to correctly say the progress %...

    Hope that isn't to much to ask... I've tried google but didn't really get anywhere...

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    It's not easy. It means you need a server side component that is capable of measuring the progress. Many of the standard file uploaders don't have that capability.

    The "trick" to it is to use AJAX to *get* the percentage from the web server.

    Now, in the meantime the web server, on some other thread, is doing the actual upload. So the uploader has to "report" the percentage cross-thread to the AJAX responder.

    One possible way to do this:

    -- Your HTML page with the <input type=file> also has a HIDDEN form field with a value created via JS. The value is a random number--a GUID would be ideal, but make it at least a 32 bit random number (or maybe use a random string of characters??).

    -- The uploader gets the info about the file being uploaded *AND* that random number/string.

    -- As it is uploading the file, it periodically reports its progress (as a percentage) into a database (or, in some systems, such as ASP/ASP.NET, into an "Application variable") using that random number/string as the "key" for the data (so that multiple users can be uploading at the same time).

    -- Your web page uses JS AJAX coding to hit the web server, as noted above, every few seconds and asks for the current percentage. You must display that percentage via a "popup" window or similar device, as the underlying form--doing the uploading--won't be "active".

    -- A slight improvement on the above is to put the <FORM> into an <IFRAME> on the web page, so that the uploading is taking place independently of the web page and then the progress bar can be just a <div> on the main page.

    If all this seems complicated, it is. If you don't have the means of creating your own file uploader, you are dependent on somebody else's uploader component having the needed progress monitoring builtin.

  • Users who have thanked Old Pedant for this post:

    Dimitri94 (06-02-2009)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    would a web page preload be any easier...?

    And yes that does seem a bit too complicated... just started using Editplus 3 and DW... But thank you for giving me an understanding...

    Rep+

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Sorry...what do you mean by "web page preload"??

    What language/system are you coding in??? PHP? ASP? What? I know of a commercial product for ASP, not too expensive. No experience doing this with PHP, though I'm 98% sure that the standard $_FILES method in PHP doesn't have this feature, so you'd have to find a way to do it yourself, most likely.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    And by the by, because this is so very difficult, you see *most* web sites displaying "dummy" progress bars...basically just animate GIFs the look like progress bars but that don't really measure anything.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    ..but programs like swfupload show the correct progress bar?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    is this one fake... http://www.stillsgallery.com.au

  • #8
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    That one is real, but it's pure flash, which makes it very easy.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by abduraooft View Post
    ..but programs like swfupload show the correct progress bar?
    swf: Flash.

    As I said, if you find a component to do it, then possible. Flash is just one such component.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •