title: Rotate an image before upload it on the server
body: <p>i have a little problem with upload images.
  Sometimes, someone, upload photos in a wrong orientation.
  Whant i want to do is rotate images before send it to my server.
  Is this possible?</p>
  
  <p>I know that i can use the function <code>imagerotate()</code> from <strong>php</strong> but i can use it after the image has been uploaded.</p>
  
  <p>Is there any way via javascript (or Jquery) to rotate the image and then pass the information to the server through php?</p>
  
  <p>Now i made something like this:</p>
  
  <p>I use <a href="http://jqueryrotate.com/" rel="nofollow">jQueryRotate.js</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form method="POST" enctype="multipart/form-data"&gt;
  &lt;input type="file" id="file" name="file"&gt;
  &lt;div id="preview"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;a href="#" id="counter" class="row"&gt;&lt;- counter&lt;/a&gt;
      &lt;select id="degree"&gt;
          &lt;option&gt;90&lt;/option&gt;
      &lt;/select&gt;
  &lt;a href="#" id="clockwise" class="row"&gt;clockwise -&gt;&lt;/a&gt;
  &lt;hr&gt;
  &lt;button type="submit"&gt;save image&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$(document).ready(function() {
  $('.row').click(function(){
      var a = $('img').getRotateAngle();
      var d = Math.abs($('#degree').val());
      if($(this).attr('id') == 'counter'){
         //d = -Math.abs(+a - +d);
          d = a - d;
      }
      else{d = +a + +d;}
  
      $('img').rotate({animateTo:d});
  });
  
  /* image preview */
  $('#file').change(function(){
      var oFReader = new FileReader();
      oFReader.readAsDataURL(this.files[0]);
      console.log(this.files[0]);
      oFReader.onload = function (oFREvent) {
          $('#preview').html('&lt;img src="'+oFREvent.target.result+'"&gt;');
      };
  });
  });
  </code></pre>
  
  <p>But i can't transfer the 'rotation' to upload file, i think....</p>
  
  <p>Thank you very much!</p>