Image Upload,Crop and Resize Using PHP, jQuery and Ajax

In This article I will let you know how to do Image uploading,cropping and resizing using PHP and Ajax.We have earlier post an article image upload and crop using popup box ,I Go huge response from all of you guys,some folks request to share article about image crop and resize without popup box or modal box.Sometime popup box creating issue on tablet and mobile.

In this Post We have provided image uploading and cropping in same page instead of modal box.We are showing and hiding image view div based on user action.I am using PHP GD library for resizing image and AJAX Form jquery plugin for image upload using AJAX manner.I am also using using Imgareaselect plugin to crop image and PHP for resizing image with save cropped image.

There are following jQuery plugin and CSS Library Used

  • jQuery Library : Base library to support other jquery plugin
  • Boostrap 3 : Used to create awesome HTML layout
  • Imgareaselect : Use to define crop co-ordinate and cropp image,You can download from here.
  • Ajax form : Use to submit form Ajax manner,You can download from here

Also Checkout other tutorial of image crop,

Image Crop Result Using PHP and AJAX

There are Following files will participate in this image crop tutorial

  • index.php : This file is responsible to create HTML layout and show cropped image.
  • profile.php : This file is responsible to all server side functionality like image cropping and saving
  • dist : This is a folder, which is use to keep all library file.

Image Uploading,Cropping and Resizing with PHP and Ajax

Step 1: First we will include all necessary jquery plugin and library files.We will keep all below files in head section of index.php file.

Step 2:We will Create div to show image and option to change image.

Here i am showing default.jpg image file for as a default image.

Step 3: Now we will create div to upload and crop image.

Step 4: Now will write some jquery code to show the Image Crop div on click of change pic button.

Above code will show uploaded image container div where you will crop and save image and hide change Pic button.

Step 5: Now we will use jQuery Ajax form plugin for form submitting and show the image for crop process on bootstrap modal box.

You can get image all parameters on 'success' call back function.

Step 6: Now we will cropped image and call save Ajax method to save image on hard disk storage.

Step 7: We will define controller/action method in profile.php.

Step 8: Model method to save image path into database.

Demo & Download Source Code Of Image Cropping with PHP and AJAX

  • hadi swaleh

    Problem:
    After cropping there is a div after footer i want to remove that footer

    this div is generated from jquery

    • u can hide div using jquery, first find div and then disable

  • Abhilash Raj R.S

    after upload i want the name of the uploaded file to a hidden textbox. How can i do it

    • you need to create a hidden field in form and set name using jquery on saving image ajax call.

      • Abhilash Raj R.S

        is it possible to make the image upload required with bootstrap validation

        • yes, you can add your custom css

  • Mobulous Apps

    i need insatance selected crop images .how can i do

    • u need to send code on mail, so i ll assist u when i ll get time

  • may be gd library missing or image creation params not correct.

  • you can store image path in db table or you can store image data in blog type table col.

  • yes, you need to allow png image in php code