When it comes to uploading files, users expect visual feedback, usually in the form of a progress bar. The problem is that PHP doesn’t offer a way to track file uploads in progress by default. Fortunately, there is an extension that enables this functionality and this tutorial will show how it can be combined with jQuery UI to create a progress bar.
Here is a demo of the effect we will be building in this tutorial:
Note: You'll need an HTTP server with PHP running on your local machine to do this. Don't try this with your website over the Internet, unless you don't mind waiting for tons of images to upload... Also, I recommend using Chrome for best results.
Let's start with our simple animation. You can see it in action here.
This tutorial will explain how to make an animated "add to queue" type functionality with jQuery. Since it is hard to explain the results, check out the demo. First, I'll show how to create the actual effect, and then how to implement AJAX submission to a back-end script for database storage or some other processing.
jQuery supports all major browsers, has a small file size, and is used by major websites such as Google! Here is the description from their website:
I came across this handy online tool that generates animated "loading images" for use with AJAX (or anything else): http://www.ajaxload.info/
You can choose from a selection of styles, set background and foreground colors, click generate, and you have your image. It's a real time saver for AJAX applications, and the best part is that they are free to use for anything!
An AJAX application is a web page that functions more like a desktop application than a traditional web page in that it feels more responsive. It works by transferring small pieces of information in the background and updating just the affected area of the page without reloading the whole thing. This not only speeds up web applications and lowers bandwidth consumption, it also increases end-user enjoyability. As AJAX becomes more popular, the gap between the Internet and desktop applications will become increasingly smaller.