visualizar un gif al pulsar input en formulario

kctus · #1 (**permalink**) 09/10/2006, 11:11

En una aplicación que sube fotos al servidor, me gustaría que cuando el usuario presione "enviar" en el formulario, se visualice un gif animado que indique que se está subiendo la foto... para evitar que el usuario presione varias veces el botoncito de enviar al ver que no ocurre nada (la página no cambia hasta que no termina el upload de la foto)

Muchas gracias

mape367 · #2 (**permalink**) 09/10/2006, 11:54

Cita:

Iniciado por kctus

Perdón por no haber buscado previamente si esta consulta ya está contestada con anterioridad, pero ando muy a las prisas...

todos andamos asi, y cometiste un error grave, probablemente nadie te ayude por eso, primero deberias buscar esas informaciones antes de preguntar... además, no enfatices que andas a las prisas, eso no ayuda...

No cuesta nada leer esto... y ponerlo en práctica.

Saludos...

kctus · #3 (**permalink**) 09/10/2006, 13:54

Ok.. ya busque y no encontré respuesta a mi duda... contento mape367?

crcbad · #4 (**permalink**) 10/10/2006, 01:27

Bueno bueno... que no cunda el ánico por aquí...

Es muy sencillo lo que quieres hacer, previamente es saber donde quieres poner la imagen para luego a la hora de enviar el formulario se muestre:

Código PHP:

  <table>
 <tr>
  <td id="preCarga">
   &nbsp;
  </td>
 </tr>
</table>

Y después, en tu botón únicamente creas la imagen :)

Código PHP:

  <input type="submit" value="Enviar" onClick="enviaForm(this.form)">
 
// Y la función sería algo así
function enviaForm(formu)
{
  miGif = document.createElement("IMG");
  miGif.src = "rutadelas/imagenes/gifAnimado.gif";
  document.getElementById("preCarga").appendChild(miGif);
 
  formu.submit();
}

Saludines ^^

kctus · #5 (**permalink**) 11/10/2006, 18:01

Muchas gracias crcbad, el gif aparece perfectamente pero hay un problema, no se muestra la animación, quedándose en el primer fotográma del mismo.

kctus · #6 (**permalink**) 12/10/2006, 08:27

No se que problema tengo con los gifs animados en el IE...

Al final, use este otro código (inspirado en el que se usa aquí en FdW para el botón de respuesta rápida y en lo dicho por crcbad)

Código:

function enviaForm(formu)
{
  document.getElementById("qr_posting_msg").style.display = '';
  formu.submit();
}

y en el lugar:

Código:

<div align="center" id="qr_posting_msg" style="display:none; margin-top:6px">
			<img src="imagenes/progress.gif" alt="Enviando Tu Respuesta Rápida - Por Favor Espera" width="16" height="16" style="vertical-align: middle;" />&nbsp;<strong>Enviando tu foto - Por favor espera</strong></div>

Y... tanto en IE como en Firefox funciona perfectamente, aunque en IE el gif no se muestra animado y en firefox si! Alguna idea??