
Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →
Please check the updated version here!
Some time ago I posted the Dynamic jQuery Image Gallery with Uploader which uses the class.upload, uploadify and ad-gallery scripts. This time I want to show how to integrate the class.upload and uploadify with the Jcrop script.
The idea is that the user uploads a picture, selects which area to crop and saves it under a specific directory.
The process then creates two images, one 100×100 and a thumbnail of 50×50. You can easly change the script to create the amount of pictures and sizes you need!
The example here is limited to .jpg images and no more than 800 kb. If you want to add more file types and increase the size, you can configure it when you call the uploadify script (index.php):
'fileExt' : '*.jpg',
'sizeLimit' : '819200',//max size bytes - 800kb
and in upload.php:
$handle->file_max_size = '819200'; // max size
Note that an usual error is due to the configuration of the “memory_limit” in php.ini. You should increase this value if you expect to upload larger images.
see the DEMO
download the source code here
Please check the updated version here!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.