Jquery image upload and crop for PHP
November 21st, 2008
Finally we had some time to create a full jquery image upload and crop script for php. This latest script is based on the first few versions of PHP & jQuery image upload and crop.
System Requirements
As before you will need the following:
- PHP 4 or Higher (It has been tested on Version 5)
- PHP GD Library
- jQuery ver 1.2.6 or Higher
- Image Area Select plugin by Michal Wojciechowski
- One-Click upload plugin by Michael Mitchell
The plan
To upload the image using the one-click upload plugin, crop it using the image area select plugin, save the selected thumbnail and then display the final result. That should be fairly straight forward!
Well thanks to the above plugins it is!
Breakdown
Uploading the file
The jquery one-click upload plugin allows the use of a link or image or button to call the “file browse” window without the need for the “file” input type. Meaning we can make it look “pretty” however we didn’t really bother but you can if you wish. The usage of this plugin is similar to the jquery ajax() function as you can see from the below.
The plugin works by creating and submitting a hidden form with the correct “enctype” something which is not possible using the basic jquery ajax() function.
var myUpload = $('#upload_link').upload({
name: 'image',
action: 'image_handling_file.php',
enctype: 'multipart/form-data',
params: {upload:'Upload'},
autoSubmit: true,
onSubmit: function() {
//do something when the form is submitted
},
onComplete: function(response) {
//do something with the result
}
});
Few things to note:
name: ‘image’ - this is the name of the file that is passed to the script below.
action: ‘image_handling_file.php’ - this is the script that will handle all of out image uploading.
params: {upload:’Upload’} - this is for any additional information that may be required in the script above.
onSubmit: function() - when the “hidden” form is submitted, a function will be executed.
onComplete: function(response) - when the process is complete we recieve the data back from the script which is stored in the variable called “response”.
Once the file has been uploaded, we will pass the file name through the onComplete: function(response), and load this response into an empty div. At the same time we activated the image area select plugin. NOTE: this must be done only after the image has loaded otherwise the cropping functionality will not work.
Cropping the image
This part as usual just grabs the coordinates of the area required and passes it to the image handling script using the jquery ajax function
$.ajax({
type: 'POST',
url: 'image_handling_file.php',
data: 'save_thumb=Save Thumbnail&x1='+x1+'&y1='+y1+'&x2='+x2+'&y2='+y2+'&w='+w+'&h='+h,
cache: false,
success: function(response){
//do something with the result
}
});
The response from this script will be the final resulting thumbnail. That is really all there is to it…
The PHP
We are not going to go into the php side of things here as it has been covered in the previous 2 articles. The files in this project are the same as before but have now been split to allow the dynamic capability.
Here is a break down of the files that are now required.
- index.php - this contains all the javascript functions and is the file used to upload/crop/view the images.
- image_handling.php - this file processes the upload, resizes the image and deletes images if required.
- image_functions.php - this file holds the variables and functions to make the whole process possible.
Within the “index.php” and “image_handling.php” files there is an include statement, please ensure this points to exactly where the “image_functions.php” file is on your server!
As with our latest version of the upload and crop script this one also supports upload and cropping for JPG, GIFs and PNGs.
Demo
NOTE: Only JPGs that are below 10kb in size are allowed for upload in the demo! The upload folder is cleared every few minutes of all images.
& 
