Automatic JPG hosting from PHP and Javascript functions

Question

I have on a client’s website a part where it shows the name of the logged in user, the drive where it works and the photo of the user.

I want to implement an automated function (in javascript and php) so that when the user clicks on the photo automatically open the window of choice of files so he can replace the photo, if he wants.

The HTML code of this part of the photo and a hidden file input:

<a title="Clique aqui para trocar sua foto" onclick='trocarFoto()'><img class='FotoAniversariante'
<?php echo "src='".'upload/wt_usuario/'.$_SESSION['usuario']['id'].".jpg'></a>";    ?>
<input type="file" id="imgupload" style="display:none" />
<button id="novaFoto" style="display: none"></button>

And the function exchanger() javascript:

function trocarFoto(){
    $('#imgupload').trigger('click');
}

What I wanted was that, by the time the new file was chosen, it would already be hosted in my server directory (upload/wt_user). I believe it has to be a function that involves AJAX.

But I also need to ensure that it only accepts JPG and with dimensions of 50 by 50. How is this possible?