1

Tengo una ventana modal desde la cual subo(busco la imagen en mi PC) y visualizo una imagen.A la vez tengo otro boton que es para guardar la foto en la base de datos.

Mi pregunta es:¿Como utilizo la funcion Before send de JQuery para mostrar un spinner o una imagen para dar a conocer que la foto está cargando o tomándose su tiempo antes de visualizarse.?

¿Como coloco el código necesario?

Aqui esta el codigo que uso.

function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/; 

            if (!file.type.match(imageType)) {
                continue;
            } 

            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();

            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }
<div class="img-wrapper-pic-profile">
              <img id="thumbnil" width="150px" height="150px"  src="" alt="Foto aqui.!"/>
          </div>
          
          <input name="foto" type="file" accept="image/*"  onchange="showMyImage(this)" class="pic-input"/>

3
  • Y donde tienes la función ajax que se ejecuta al darle click al boton guardar? Commented el 25 oct. 2017 a las 1:30
  • @CamiloVasquez No es para guardar la foto,es para visualizarla,osea cuando yo elija la foto desde mi PC,entonces la foto antes de visualizarse en la ventana modal me aparezca un spinner de carga al menos por dos o tres segundos.El botón guardar va aparte.
    – luis
    Commented el 25 oct. 2017 a las 1:34
  • 1
    A ok había entendido mal, ya te coloco una respuesta con tu solución Commented el 25 oct. 2017 a las 1:40

1 respuesta 1

1

Podrías crear una especie de cargador (imagen gif) el cual puedes mostrar/ocultar a gusto mientras se ejecuta la petición.

Puedes hacerlo de la siguiente manera:

function showMyImage(fileInput) {
    var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {           
        var file = files[i];
        var imageType = /image.*/; 

        if (!file.type.match(imageType)) {
            continue;
        } 

        var img=document.getElementById("thumbnil");            
        img.file = file;    
        var reader = new FileReader();

        reader.onload = (function(aImg) { 
            return function(e) {
            	document.getElementById("cargador").style.display = 'block';

            	setTimeout(function(){
            		aImg.src = e.target.result;

            		document.getElementById("cargador").style.display = 'none';
            	}, 3000)
            }; 
        })(img);
        reader.readAsDataURL(file);
    }    
}
#cargador{
	display: none;
}
<div class="img-wrapper-pic-profile">
	<img src="https://media.giphy.com/media/ouga3mZ6gwd9u/giphy.gif" id="cargador" width="50px">
    <img id="thumbnil" width="150px" height="150px"  src="" alt="Foto aqui.!"/>
</div>
          
<input name="foto" type="file" accept="image/*"  onchange="showMyImage(this)" class="pic-input"/>

1
  • 1
    Gracias!Me gusta esa.
    – luis
    Commented el 25 oct. 2017 a las 2:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.