Can I use jQuery UI Progress Bar to indicate the p

Question

I have a web page that has several files available for download. These files vary in size from 1MB to 40MB. To help the user see that something is actually happening during the file download process, I would like to include a progress bar that gives a visual indication of the download progress.

Would the jQuery UI Progress Bar work for this kind of task? If so, are there some examples of such coding that I could follow? (Yes, I have reviewed the jQuery UI site on this).

Thanks.

Answer 1

Yes, if you change such as your code: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

Browser support: CanIuse

Answer 2

Well, the problem is a bit the other way around: What you need is something to show that you php is reading the content of the file into something (most likely a header thing). When the header/string is done, the browser download more or less takes over.

That's at least my experience with PHP and file downloading.

I have a theory that you could with PHP find out how much data has been read, and how much this is compared with the total size of the file, then show that using some AJAX technique. Again: this is just a theory. It is not tested. But I am having the same challenge my self at the moment. My task is that the file is first read from a FTP-server, then pushed to the browser.

Answer 3

If I'm not mistaken, all browsers have built in progress bar. So you don't need to make one.

Answer 4

In short, no, you can't do this.

The page listing these files for download has nothing to do with the transaction after the download has begun. It's up to the browser to display a progress bar and indicate when the download has completed. Once the user is downloading a file, the dialog takes place between their browser and the webserver - your page is no longer involved.