Imagen Loading en Upload de archivos.

[a77icu5]

XDD Novato en foro pide ayuda:

Estoy haciendo un script de upload de archivos, pero en muchos sitios he visto que cuando subo un archivo, desaparece el formulario y aparece la clasica imagen "loading" mientras se carga mi archivo y al terminar aparecen los atributos del archivo que ya ha sido guardado, y todo en una misma pagina....

Me podrian decir como puedo hacer eso ?

[david_M_G]

Puedes poner una capa DIV oculta de HTML y que al pulsar el botón "subir" esta capa sea visible. En esta capa añades el diálogo de cargando y lo que quieras. Cuando se haya subido, la página cambiará sola.

simplemente eso. Espero que te sirva.

[a77icu5]

Pues suena muy bien david, pero no soy precisamente el guru que Mexico esperaba para el CSS, me podrias dar unas pistas...jejeje si no es mucho pedir.

[Ronruby]

La solucion que te dio david la puedes realizar con AJAX.

EDIT: Disculpa, crei que querias mostrar el "Loading" en la misma pagina. :P En este caso no tienes que usar AJAX. O si? xD

[a77icu5]

La verdad no lo se, ando completamente en 0, pero ese metodo lo he visto en varias paginas y se ve muy bien.

Escena 1: aparece el formulario para mi archivo en un cuadro.
Escena 2: cuando le doy clic en "enviar" el formulario desaparece y en el mismo cuadro en su lugar aparece la imagen "loading" mientras se carga la imagen.
Escena 3: al terminar, la imagen desaparece y en su lugar se muestran las propiedades de mi archivo, nombre, tamanio, etc....y todo eso pasa en el mismo cuadro.

Eso es todo, se que es algo muy simple...o se ve muy simple, pero tengo la curiosidad de saber como se hace, por que ese mismo efecto lo he visto paginas cuando te logeas o cuando haces busquedas entre otros.

[Ronruby]

Iniciado por a77icu5

La verdad no lo se, ando completamente en 0, pero ese metodo lo he visto en varias paginas y se ve muy bien.

Escena 1: aparece el formulario para mi archivo en un cuadro.
Escena 2: cuando le doy clic en "enviar" el formulario desaparece y en el mismo cuadro en su lugar aparece la imagen "loading" mientras se carga la imagen.
Escena 3: al terminar, la imagen desaparece y en su lugar se muestran las propiedades de mi archivo, nombre, tamanio, etc....y todo eso pasa en el mismo cuadro.

Eso es todo, se que es algo muy simple...o se ve muy simple, pero tengo la curiosidad de saber como se hace, por que ese mismo efecto lo he visto paginas cuando te logeas o cuando haces busquedas entre otros.

En ese caso si necesitarias AJAX. Pasate por el foro de AJAX, alla te podran guiar mejor.

[david_M_G]

AJAX no es necesario. Sirve si quieres hacer cosas más complejas como una barra de porcentaje de la subida del archivo, pero mostrar "cargando" no lo requiere.

Con JavaScript puedes hacer una función que altere el DIV que te decía al principio.
Un ejemplo práctico:

HTML

Código:

<div id="cargando"></div>

esta capa la pones donde quieras mostrar el "cargando"

Botón del formulario

Código:

<input type="submit" name="subir" onClick="mostrarcargando()">

JavaScript

Código:

<script>
function mostrarcargando()
   {
   var obj = document.getElementById('cargando');
   obj.innerHTML = "Se esta subiendo la imagen... Por favor, espera.";
   }
</script>

[GatorV]

Tema trasladado a Javascript.

[Panino5001]

En este post ya se trató el tema:
http://www.forosdelweb.com/f13/gif-c...e-foto-558864/

[a77icu5]

Muchas gracias a todos por sus respuestas, ya me ayudaron demasiado y se han ganado sus kilos de Karma !....

gracias david.