Today we are going to create an image upload and resize script with a progress bar. This is an extension of my previous tutorial about image upload and resize script using jQuery and PHP, I suggest you go though that tutorial, because only thing we are going to add here is a progress-bar.

There are plenty of great image uploader scripts on the net, but you may find them complicated to implement, especially if you are novice one. Those uploader(s) come with additional scripts and files which you may not even need, so sometimes your best bet is to code your own image upload and resize script, which will serve the purpose and keep things simple.

This jQuery snippet comes in handy when you want to move text/HTML content back and forth, the function below uses “is:empty” to check if empty element, and moves content from one element to another using appendTo() method, hope it helps.

If you are bit familiar with basics of jQuery JavaScript library, next thing you want to do is learn jQuery Ajax to add and delete records from MySQL database table. In this basic tutorial we are going to do the same, we will focus on learning jQuery to send POST data to a PHP file and respond back with results or errors. Without having to reload the page, the Ajax technique is a very neat way to add or delete / database records, also it looks very cool.