PHP Image Upload and Crop in jQuery Example

PHP Image Upload and Crop in jQuery

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

Read Also:  How to get Main or Base URL in Laravel?

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
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 Also:  Ajax Image Upload using PHP and jQuery

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.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *