Sustituir boton submit por gif de cargando mientras se sube un archivo al servidor

#1 (**permalink**) 25/12/2009, 04:58

Para empezar tengo ese formulario html:

Código HTML:

<html>
<head>
<link rel = "StyleSheet" type = "text/css" href = "StyleUpload.css"/>

<script language = "JavaScript" type = "text/javascript">
document.oncontextmenu = function SecondClickOff() { return false; }
</script>
</head>

<body>
<h1 class = "select_msg">Seleccione un archivo</h1>
<form action = "UploadProcess.php" method = "POST" enctype = "multipart/form-data">
<input type = "file" name = "archivo" size = "55" class = "button"/>
<p></p>
<p class = "msg"><strong>Nota:</strong> Los archivos subidos al servidor estan localizados en la carpeta
<a href = "../data/UPLOADS">"UPLOADS"</a>
</p>
<br>
<input name = "subir" type = "submit" value = "Subir" class = "button"/>
<input name = "action" type = "hidden" value = "upload"/>
</form>
</body>

</html>

Quisiera hacer que al pulsar el boton "Subir" desaparezca este boton y se reemplaze por una imagen gif de cargando mientras se sube el archivo al servidor.

Hay alguna forma de hacerlo? He buscado mucho y he intentado muchas cosas pero ni siquiera me aproximo a lo que busco, espero que me puedan ayudar :)

Se que con JavaScript es posible.

Saludos! =D

caricatos · #2 (**permalink**) 25/12/2009, 05:22

Hola:

Es que no le veo ningún sentido el cambio si al hacer submit la página se cerrará para cambiar a la delk action (otra cosa sería que usase un target... en tal caso, puedes tener la imágen oculta (<img style="display: none"... ) y en el botón hacer el rollover... pero eso ya es cosa de javascript.

Por cierto, ten cuidado con la sintaxis, que entre los atributos, el signo igual (=) y su valor no deben existir espacios en blanco... tal vez te funcione en algún navegador, pero tal como lo tienes no es correcto.

Saludos

#3 (**permalink**) 25/12/2009, 16:15

Es que he visto que en algunas páginas web que al hacer cargas de archivos al pulsar el botón "Enviar" o "Subir" (dependiendo del caso), aparece una barra cargando (imágen gif) por mientras se envían los datos al formulario o se sube el archivo.

Lo que pasa es que mientras se suben los datos no se muestra al archivo .php si no que se queda en el formulario .html hasta que termina la carga del archivo al servidor, y recién después de eso según unas condiciones if else del php muestra un informe sobre la carga del archivo (subido correctamente o error), es ahí donde recién se manifiesta por decirlo de algún modo... ojalá me entiendan.

Les dejo la pagina del formulario para que intenten subir un archivo (que demore harto en subir) para que vean a lo que me refiero... se queda en el html cargando y cuando termina muestra el php:

http://diegoulloa.homelinux.com/upload/

Creo que JavaScript es la solución.
Tomaré en cuenta lo de la sintaxis html ;)

caricatos · #4 (**permalink**) 25/12/2009, 16:25

Hola:

Pues eso solo puede hacerse enviando el formulario (o al menos la parte del campo file) a un iframe oculto para poder saber lo de la carga completa...

Creo que te puede valer este artículo: Revisar las imágenes antes de subirlas... en el link del artículo hay un ejemplo sin el gif animado, pero cambiando la extensión .html por .php se puede ver un gif animado (el artículo es mio)

Saludos

#5 (**permalink**) 25/12/2009, 17:10

Lo que quiero hacer es lo mismo que ocurre en el boton "Guardar" de este foro (al editar un post), que mientras envia el mensaje al php muestra un gif cargando.

Revise tu artículo y no encontre lo que busco (Quizás no pillé el codigo debido a que no me manejo mucho, o quizas no me entendiste la idea)

Disculpa las molestias.
Saludos =)

caricatos · #6 (**permalink**) 25/12/2009, 17:28

Hola:

Los dos temas son cosas Ajax, pero cuando se trata de imágenes no sirve el objeto Ajax normal (XMLHttpRequest), porque loas peticiones Ajax no admiten las cabeceras para subir imágenes... (tal vez te suene a chino...), y el sistema que comentas sí que trabajan con el sistema Ajax normal...

En el artículo, no se comenta lo del gif animado, pero si que se vé en el link que te comenté... pero para no dar muchas vueltas, trataré de explicarte el sisrtema...

Hace falta un formulario con ese campo file para las imágenes, y obligatoriamente el método post, y el enctype multipart/form-data, y un target que coincida con el nombre de un iframe oculto.
Cuando se selecciona una imagen, se lanza el evento change del control file (onchange), y en ese momento se debe enviar ese formulario, y mostrar esa imagen oculta (el gif animado)... luego cuando se termine de cargar la página en el iframe (onload) se advierte a la página padre pare que vuelva a ocultar la animación... chino, pero lógico...

Saludos

punkslot28 · #7 (**permalink**) 25/12/2009, 17:35

Ole!!!!!!!!!!!!!!!! un moderador de aquí de málaga!!

referente al tema.. lo de cargar es una opción que consume bastante, creo que no es prioritario a caso que hablemos de un html compuesto unicamente por actionscrip o javascrip