O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying file upload progress

It would be nice if there was a straightforward way to display the progress of a file upload using the progressbar widget. Unfortunately, we are afforded no such luxury. The uploading of a file happens between the transitions of pages. However, the necessary hacks to display the upload progress using the progressbar widgets have shrunk in size, thanks to the modern standards and browsers. Let's take a look at how we can take advantage of the onprogress event of the XML HTTP Request object in Ajax requests.

Getting ready

For this demonstration, we will create a simple form with a simple file field. Inside the form, we'll create some HTML for displaying the progressbar widget. It'll be hidden until the user initiates ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required