gif cargando subir foto

[RocoBox3000]

Hola amigos,

Tengo este codigo para subir una imagen por ajax.
Lo que me gustaria hacer es que cuando hago click sobre el boton "Subir" aparezca un gif de cargando hasta que la foto este completamente subida, despues desaparezca. No se si es muy complicado.

Quizas alguien me pueda poner un ejemplo de como hacerlo.

Os dejo el codigo

Código Javascript:

$("#boton").click(function() { 
    var inputFileImage = document.getElementById("foto"); 
    var file = inputFileImage.files[0];
    var data = new FormData();
    data.append("foto",file);
    
    var url = "miphp.php";
        $.ajax({
        
            url:url,
            
            type:'POST',
                
            contentType:false,
            
            data:data,
            
            processData:false,
            
            cache:false
        }); 
});
 

Código HTML:

<form method="post" enctype="multipart/form-data">
    <input type="file" name="foto" id="foto"> 
    <button type="button" id="boton">Subir</button>
</form>
 

Gracias
saludos