Creando una imagen de cargando en form.... Buenas.
Estoy creando una web en php y en una pagina tengo el archivo index.php el cuál contiene un form que da acción a post.php
<form action="/medblogs/upload/fotos/post.php" method="post" enctype="multipart/form-data" name="form1">
<p align="center"><span class="Estilo7">Mi foto:</span>
<input name="archivo" type="file" id="archivo">
</p>
<p align="center"><input name="boton" type="submit" id="boton" value="Enviar">
<span name="MOSTRAR" id="MOSTRAR"></span>
</p>
</form>
Lo que quiero hacer es que al dar click en Enviar, abajo del input archivo me aparesca una imagen de cargando(un gif). Intenté hacer lo siguiente:
Modifiqué el input de la siguiente forma:
<input name="boton" type="submit" id="boton" value="Enviar" onclick="javascript:loader()">
y el script puesto en el head es así:
<script language = "javascript" type="text/javascript">
<!--
function loader(){
NAME = document.getElementById("MOSTRAR")
NAME.innertHTML="<img src='urldelaimage'>"
}
//-->
</script>
Creo que el problema es que cuando doy click en enviar la pagina index deja de estar activa...
Es desesperante para usuarios novatos el no ver acción al dar click en enviar, y aveces salen de la pagina sin aberse cargado el archivo, por eso necesito que se muestre en pantalla algo distinto.
¿Alguien puede ayudarme? ¿Hay alguna otra forma de hacer esto?
Pensé en cuando da click en enviar se abra otra ventana con el gif de cargando, pero no sé como hacer que ésta se cierre cuando termina de cargarse el archivo. además que tendría problemas con los bloqueadores emergentes, so, me sirve más la primera opción
Muchas gracias de antemano por su atencion amigos(=
