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

[Alexis88]

Ya que estás trabajando con jQuery, te recomiendo leer esto. Por cierto, debiste publicar este hilo en el sub-foro de jQuery.

Saludos

[Djoaq]

Solución fácil :
creas una función que llame a la imagen y luego otra función que la retire :

Código Javascript:

function cargar_imagen() { $('#contenedorImg').html("<img src='turuta/tuloader.gif'/>").fadeIn('fast'); }
function esconde_imagen() { $('#contenedorImg').fadeOut('fast'); }
 

Luego en tu función ajax :

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";
      
        cargar_imagen();   
      
            $.ajax({
           
                url:url,
               
                type:'POST',
                   
                contentType:false,
               
                data:data,
               
                processData:false,
               
                cache:false,
               
                success: esconde_imagen()
 
            });
    });
 

Y listo!

Saludos!

[Alexis88]

Djoaq, para hacer lo que dices no hacía falta crear funciones, Ajax tienes sus propios métodos para cuando se inicia y termina una petición asíncrona.

Código Javascript:

$(document).ajaxStart(function(){
    //...
}).ajaxStop(function(){
    //...
});
 

Saludos

[Djoaq]

No la conocía !

Grácias!