Ajax Image Upload and Resize with jQuery and PHP
Sometimes, it’s better to create your own stuff, than to rely on some complicated Image Gallery with additional functions which you may not even need. This is a very useful combination of jQuery and PHP script to upload and resize image file without refreshing the page, which means we will be using Ajax to send and request data from server. The script should run out of the box, but it can be modified and extended to suite your needs.
Image Upload Form
This is where uploaded image file is sent for processing and then results are sent back to main page as Ajax response. You can change settings value thumbnail size, image size as per your requirements, one more thing to note here is upload folder path ($DestinationDirectory), make sure folder is writable and path is correct.
Everything is pretty much explained in comment lines, but I want to emphasize few things here, in this script there are two different functions resizeImage() and cropImage(). First one resizeImage() will proportionally resize image, it resizes according to specified size values but final size may vary, depending on original size of image. And the cropImage() will crop image and resize to exact given size no matter what its original size. I have used cropImage() to create thumbnails and for normal resize resizeImage() is used.
That’s it! You can download sample file by clicking download button below, zipped file contains PHP files, css, jQuery form plugin and may be some images. Hope it helps, Good luck!
Saran Chamling. (He loves the web technology, and enjoys designing, exploring and writing about it @saaraan.com).