title: Uploading image using ajax
body: <p>I have a variables <code>src</code> and <code>image</code>,</p>
  
  <pre><code>var src = $("#img_tag").attr('src');
  var image = new Image();
  </code></pre>
  
  <p>I want to pass this <code>image</code> variable to a public function in <code>php</code> to upload. What is it that <strong>exactly</strong> that I need to pass, is it the <em>src</em>, the <em>base64</em>, the <code>image</code> itself as <code>new FormData</code> ?</p>
  
  <p>Right now I have:</p>
  
  <pre><code>var data = new FormData();
  var src = $("#img_tag").attr('src');
  var image = new Image();
  data.append('Image', image);
  
  console.log(data);
  
  $.ajax({  
      url: "/products/image_upload",  
      type: "POST",  
      data:  data,
      processData: false,  
      contentType: false, 
      success: function (msg) {
          console.log(msg+"---Image was uploaded");
      }
      error: function(err) {
          console.log(err);
      }
  });
  </code></pre>
  
  <p>In my <code>view</code>:</p>
  
  <pre><code>public function image_upload() {
      $this-&gt;autoRender = false;
      echo json_encode($this-&gt;data);
      if($this-&gt;request-&gt;is('post'))
      {
           if(!empty($_FILES['Image']['name'])) {
              $file = $_FILES['Image'];
              echo json_encode($file);
              $ext = substr(strtolower(strrchr($file['name'], '.')), 1);
              $arr_ext = array('jpg', 'jpeg', 'gif', 'png');
              $temp = explode(".", $file['name']);
              $newfilename = $_FILES['Image']['name'];
              if(in_array($ext, $arr_ext))
              {
                  if(move_uploaded_file($file['tmp_name'], WWW_ROOT . 'img/product-uploads' . DS . $newfilename))
                  {
                      echo json_encode("Image uploaded properly");
                      return json_encode($_FILES);
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>And getting:</p>
  
  <pre><code> {"Image":"[object HTMLImageElement]"}---Image was uploaded
  </code></pre>
  
  <p><strong>BUT IMAGE IS NOT UPLOADED</strong></p>