图片的裁剪和ajax上传答案

【问题标题】：cropping and ajax uploading of image图片的裁剪和ajax上传
【发布时间】：2010-11-11 05:13:44
【问题描述】：

我想通过 ajax 上传和裁剪图像。

请建议我如何做到这一点。

【问题讨论】：

您可以尝试查看 jQuery 的插件页面，我相信您会找到一个可以做到这一点的插件。
您使用的是哪种服务器端语言？

标签： php jquery ajax image upload

【解决方案1】：

要上传图片，您需要处理上传的 javascript 进程，如果您使用的是 jquery 库，有很多插件可以做到这一点。要处理上传过程，您将需要 php 脚本。您正在从 ajax 向 php 脚本发送请求，它会进行上传。

要裁剪图像，您需要一个裁剪工具或裁剪脚本，这是一个很酷的http://www.webresourcesdepot.com/jquery-image-crop-plugin-jcrop/

处理裁剪后的图像后，您需要通过 jquery 上传插件或其他 jquery 或 javascript ajax 代码执行上传过程 (php)。

【讨论】：

【解决方案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;
      }

    }

【讨论】：