title: cropit ajax upload with php
body: <p>I'm using cropit.js for upload an image with php.</p>
  
  <p>I just following this question
  <a href="https://stackoverflow.com/questions/28085848/how-to-crop-and-upload-photo-using-cropit-jquery-plugin-with-php">How to crop and upload photo using cropit jquery plugin with php</a></p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;form action="#" class="form-horizontal form-bordered" id="formUpload"&gt;
    &lt;div class="image-editor"&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;button id="fakeUpload" class="btn btn-default col-xs-12"&gt;&lt;i class="fa fa-upload"&gt;&lt;/i&gt; Scegli la foto da caricare&lt;/button&gt;
              &lt;input type="file" class="cropit-image-input" name="bannerUpload" id="bannerUpload" style="display:none;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-xs-12 text-center"&gt;
              &lt;div class="cropit-image-preview"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="zoomUpload" class="col-md-2"&gt;Zoom&lt;/label&gt;
          &lt;div class="col-md-10 text-center"&gt;
              &lt;input type="range" class="cropit-image-zoom-input" id="zoomUpload"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="col-xs-12 text-center"&gt;
              &lt;input type="hidden" name="image-data" class="hidden-image-data" /&gt;
              &lt;button type="submit" class="btn btn-primary col-xs-12"&gt;&lt;i class="fa fa-cloud-upload"&gt;&lt;/i&gt; Carica&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and this the JS:</p>
  
  <pre><code>$('#formUpload').submit(function() {
      // Move cropped image data to hidden input
      var imageData = $('.image-editor').cropit('export');
      $('.hidden-image-data').val(imageData);
  
      // Print HTTP request params
      var formValue = $(this).serialize();
      //$('#result-data').text(formValue);
  
      $.ajax({
        type: "POST",
        url : "cpu/uploadBanner.php",
        data: formValue,
        success: function(msg){
            //$("#AjaxResult").html(msg);
            alert(msg);
        }
      })
      // Prevent the form from actually submitting
    return false;
  });
  </code></pre>
  
  <p>Finally the PHP code:</p>
  
  <pre><code>&lt;?php
  include '../inc/config.php';
  
  if($_SERVER['REQUEST_METHOD']=="POST"){
      $encoded = $_POST['image-data'];
      //decode the url, because we want to use normal charackters to use explode
      $decoded = urldecode($encoded);
      //explode at ',' - the last part should be the encoded image now
      $exp = explode(',', $decoded);
      //we just get the last element with array_pop
      $base64 = array_pop($exp);
      //decode the image and finally save it
      $data = base64_decode($base64);
      $file = 'data.png';
      //make sure you are the owner and have the rights to write content
      file_put_contents($file, $data);
      echo 'ok';
  }else{
      echo "Non dovresti essere quì!";
  }
  ?&gt;
  </code></pre>
  
  <p>When the form is submitted I see the new image called 'data.png' but I see all black, don't save the image correcty or what? The folder have 777 permission.</p>