PHP Image Upload And Crop In JQuery Example

Today, We want to share with you PHP Image Upload and Crop in jQuery.
In this post we will show you Resize And Crop Image Using PHP And jQuery, hear for Crop Image and Upload using jQuery and PHP and jquery resize image before upload we will give you demo and example for implement.
In this post, we will learn about Image Crop and Upload using JQuery with PHP Ajax with an example and more laravel crop image before upload.

PHP Image Upload and Crop in jQuery

There are the Following The simple About PHP Image Upload and Crop in jQuery Full Information With Example and source code.If you want jquery image cropper with upload PHP complex way image/files upload with jQuery AJAX, then simple download all the 100% working PHP source code from the jQuery Ajax Image Upload without Page Refresh using PHP post.

index.php – HTML Form

HTML Form with View Image/file Upload Option

<h2>Upload and Crop Image using PHP and jQuery</h2>
<div class="pakainfo bgColor">
    <form id="uploadForm" action="" method="post"
        enctype="multipart/form-data">

        <div id="uploadFormLayer">
            <input name="studentPicture" id="studentPicture" type="file"
                class="inputFile"><br> <input type="submit"
                name="upload" value="Submit" class="btnSubmit">

        </div>
    </form>
</div>
<div>
    <img src="<?php echo $imagePath; ?>" id="cardboxcrop" class="pakainfo img" /><br />
</div>
<div id="btn">
    <input type='button' id="photo_crop_custom" value='CROP'>
</div>
<div>
    <img src="#" id="reimgsize_croped_pic" style="display: none;">
</div>

Step 2 : PHP Image Upload

PHP Images server side Upload source Code – dynemic-image-crop.php

In the PHP files $_FILES get all the array data value is fetched and more uploaded file is moved to the particular media or upload folders target

<?php
if (! empty($_POST["upload"])) {
    if (is_uploaded_file($_FILES['studentPicture']['tmp_name'])) {
        $folderdirPath = "media/" . $_FILES['studentPicture']['name'];
        if (move_uploaded_file($_FILES['studentPicture']['tmp_name'], $folderdirPath)) {
            $uploadPath = $folderdirPath;
        }
    }
}
?>

Step 3 : jQuery Enable Cropping

jQuery Based used To Jcrop Library

<script type="text/javascript">
$(document).ready(function(){
    var imgsize;
    $('#cardboxcrop').Jcrop({
      aspectRatio: 1,
      onSelect: function(c){
       imgsize = {x:c.x,y:c.y,w:c.w,h:c.h};
       $("#photo_crop_custom").css("visibility", "visible");     
      }
    });
 
    $("#photo_crop_custom").click(function(){
        var img = $("#cardboxcrop").attr('src');
        $("#reimgsize_croped_pic").show();
        $("#reimgsize_croped_pic").attr('src','dynemic-image-crop.php?x='+imgsize.x+'&y='+imgsize.y+'&w='+imgsize.w+'&h='+imgsize.h+'&img='+img);
    });
});
</script>

Output For jQuery Upload and Crop Image using PHP

upload-and-crop-image-using-php-and-jquery-output

Angular 6 CRUD Operations Application Tutorials

My Paka Knowledgeable Ideas, Tips and Tricks, Useful Content, Jobs, Technology, Earn Money, gmail creation, skype, yahoo and more useful things.

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Crop Image and upload with php.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.