cropping and ajax uploading of image - php

Question

I want to upload and crop an image via ajax.
Please suggest how I can do this.

Answer 1

To upload an image you will need javascript process handling the upload , there are plenty plugins to do it if you are using jquery library.
To handle uploading process you will need php script. You are sending request to php script from ajax and it does the upload .
To crop image you need a crop tool or crop script here is a cool one http://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/
After you handled cropped image you need to execute uploading process (php) by jquery uploader plugin , or another jquery or javascript ajax code.

Answer 2

Here is the code Jquery + PHP [Cake PHP]
View file upload.ctp
<script type="text/javascript" src="http://demos.9lessons.info/ajaximageupload/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#photoimg').on('change', function(){
$("#preview").html('');
$("#preview").html('<img src="/images/ajax-loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({target: '#preview',success: showResponse}).submit();
});
});
</script>
<form id="imageform" method="post" enctype="multipart/form-data" action='/media/upload'>
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'></div>
create a function with name upload in Media controller
function upload(){
$this->layout = '';
$session_id='1'; // User session id
$path = "images/media/images/original/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
//pr($_FILES);die;
//if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)) {
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)){
if($size<(1024*1024)) { // Image size max 1 MB
$txt=str_replace(" ","_",$txt);
$actual_image_name = $txt."_".time().".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
App::import('Vendor', 'resize');
if(move_uploaded_file($tmp, $path.$actual_image_name)) { //Code for image resize
//mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
// save this to DB into Temp Selection table set USer wise and Capsule or individual Board wise
echo "<img src='/images/media/images/".$actual_image_name."' class='preview'><br/><a href='javascript:void(0);' id='upload_submit'>Submit</a>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file fo`enter code here`rmat..";
}
else
echo "Please select image..!";
exit;
}
}