Implementing rich uploads with a progressbar

Instead of relying on user interaction to increase the value of the progressbar and therefore the completion of the specified task, we can instead rely on the system to update it, as long as something is available that can be used to update it accurately.

In our final progressbar example, we can incorporate the HTML5 file API, in order to upload a file asynchronously, and can use the onprogress event to update the progressbar, while the file is uploading.

Tip

At this point, you may like to obtain a copy of the code download that accompanies this book, so that you can work through the code at the same time as you study the example.

This example will only work correctly using a full web server with PHP installed and configured. We won't be looking at the server-side part of the upload process in this example; we're not interested in what happens to the file once it's been uploaded, only in updating the progressbar based on feedback received from the...