Image upload and cropping is very important part in every project. In this post i will explain you how to upload image from ajaxform plugin and crop uploaded image with


jcrop plugin.
HTML image upload form

This is a simple html form where we can first select and upload image using ajaxform plugin and save to server.

Download jquery ajaxform plugin and add to your page/file, after adding plugin you need to add below code to your file to upload image.

in above code when user press or click on submit button we can upload selected image to server and save image src to database and in #preview we can display result generated by php page where image is send to upload.

PHP code for image upload and save image link to database

In above code i add simple image validation code and upload it to selected directory and if image is uploaded and  inserted i return a link where we can crop this image.

Database to save image:

In this i create three columns where we can save id, new image upload location and crop image location.

CROP upload image Jcrop and PHP

JCrop is one of the best cropping plugin to crop image using jquery.  Here is code to use jcrop in your website.

In above code we can create a hidden form in which we can save crop location of image which user select to crop over image and after click on crop button we can crop image from specific part which is selected by user using php as shown bellow.

Done hope you like this and this will help in you projects.


Happy coding.

Posted in: php