圖像的裁剪和ajax上傳

Question

我想通過ajax上傳和裁剪圖像。

請建議我如何做到這一點。

Answer 1

要上傳圖片，您需要javascript處理上傳，如果您使用的是jQuery庫，有很多插件可以實現。 要處理上傳過程，您需要使用php腳本。您正在從ajax發送請求到php腳本，它會上傳。

即可裁剪圖片，你需要裁剪工具或這裏作物腳本是一個很酷的一個http://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/

後，你處理你需要的jquery上傳插件來執行上傳過程（PHP）裁剪圖像，或者是另一個jQuery或JavaScript AJAX碼。

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; 
     } 

    }