-
Book Overview & Buying
-
Table Of Contents
jQuery UI Cookbook
By :
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.
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 a file upload.
<form action="http://127.0.0.1:8000/" method="POST">
<input type="file" name="fileupload"/>
<br/>
<input type="submit" value="Upload"/>
<div id="upload-container" class="ui-helper-hidden">...
Change the font size
Change margin width
Change background colour