Automatic hosting of JPG from PHP and Javascript functions [closed]

I have a part of a client's site that shows the name of the logged-in user, the drive where it works, and the user's photo.

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

The HTML code for this part of the photo is 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 Switch Photo () function in 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's 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 50-by-50 dimensions. How is this possible?