Rotate the image before uploading to the server

I have a little problem loading images. Sometimes someone uploads photos in the wrong orientation. What I want to do is rotate the images before sending them to my server. Is it possible?

I know I can use a function imagerotate()

from php , but I can use it after the image is loaded.

Is there a way using javascript (or JQuery) to rotate the image and then pass the information to the server via php?

Now I have done something like this:

I am using jQueryRotate.js

Html

<form method="POST" enctype="multipart/form-data">
<input type="file" id="file" name="file">
<div id="preview"></div>
<br>
<a href="#" id="counter" class="row"><- counter</a>
    <select id="degree">
        <option>90</option>
    </select>
<a href="#" id="clockwise" class="row">clockwise -></a>
<hr>
<button type="submit">save image</button>
</form>

      

        
        
        
      

    

Jquery

$(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('<img src="'+oFREvent.target.result+'">');
    };
});
});

      

        
        
        
      

    

But I cannot pass the "turn" to download the file, I guess ....

Many thanks!