Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de Sustituir boton submit por gif de cargando mientras se sube un archivo al servidor en el foro de HTML en Foros del Web. Para empezar tengo ese formulario html: Código HTML: <html> <head> <link rel = "StyleSheet" type = "text/css" href = "StyleUpload.css"/> <script language = "JavaScript" type ...
  #1 (permalink)  
Antiguo 25/12/2009, 04:58
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Sonrisa Sustituir boton submit por gif de cargando mientras se sube un archivo al servidor

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
  #2 (permalink)  
Antiguo 25/12/2009, 05:22
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sustituir boton submit por gif de cargando mientras se sube un archivo al

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 25/12/2009, 16:15
de-troit
Invitado
 
Mensajes: n/a
Puntos:
De acuerdo Respuesta: Sustituir boton submit por gif de cargando mientras se sube un archivo al

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 ;)

Última edición por de-troit; 25/12/2009 a las 16:21
  #4 (permalink)  
Antiguo 25/12/2009, 16:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sustituir boton submit por gif de cargando mientras se sube un archivo al

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 25/12/2009, 17:10
de-troit
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Sustituir boton submit por gif de cargando mientras se sube un archivo al

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 =)
  #6 (permalink)  
Antiguo 25/12/2009, 17:28
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sustituir boton submit por gif de cargando mientras se sube un archivo al

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 25/12/2009, 17:35
Avatar de punkslot28  
Fecha de Ingreso: junio-2009
Ubicación: Málaga
Mensajes: 215
Antigüedad: 8 años, 6 meses
Puntos: 2
Respuesta: Sustituir boton submit por gif de cargando mientras se sube un archivo al

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:16.