Mostrar imagen gif de loading

[komodo]

Hola a todos! Estoy realizando un sistema de upload de imagenes en php. Me gustaria que en el formulario donde selecciono la imagen a subir, al apretar el boton de enviar se mostrara debajo del formulario una imagen gif de una barra de progreso mientras se sube el fichero al servidor y una vez acabe esta imagen desaparezca.El formulario esta en php y este llama a otro script para realizar la subida del fichero del servidor. Como podria hacer esto?
Gracias y un saludo

[nicolaspar]

No tenes manera, ni con php, ni con javascript de leer el buffer del browser mientras hace el upload.

Ahora, a no desesperar que hay soluciones. Podes desde usar flash (versión 8 ya trae nativo este componente creo), o usar asp, perl, o algún cgi para esta tarea.

Sino otra es poner este gif animado que decís pero no será real a la info enviada, (podes hacer las típicas rueditas que loopean infinitamente...) eso lo mostras (se oculta solo cuando salga de la pagina) usando style.display en none y block.

[komodo]

Hola de nuevo!Gracias por la respuesta, efectivamente quiero poner una imagen gif que loopea infinitamente siendo no real, para que el usuario sepa que el script se está ejecutando y de paso mientras se ejecuta desactivar el boton de enviar.Tengo el siguiente codigo para el formulario.

Código PHP:

  <?php
echo '<form name="upload" method="post" action="photo_upload.php" enctype="multipart/form-data">';
echo '<table border="1" cellpadding="0">';
echo '<tr>';
echo '<td>';
echo 'Archivo ';
echo '<input name="archivo" type="file">';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>';
// Mostrar error de Autentificación.
include ("../Pag/error_reporting.php");
if (isset($_GET['error_login'])){
$error=$_GET['error_login'];
echo "<font class='error'>$error_login_ms[$error]</font>";}
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td align="center">';
echo '<input name="Submit" type="submit" value="Enviar" >';
echo '</td>';
echo '</tr>';
echo '<tr>';
echo '<td>';
echo '<div align="center"></div>';
echo '</td>';
echo '</tr>';
echo '</table>';
echo '</form>';   

Dentro del div irá la imagen gif que se mostrará solo cuando se este ejectutando el script 'photo_upload.php' y el boton de enviar estará desactivado. Como podria hacerlo?No entiendo mucho de javascript, si sois tan amables de ponerme un ejemplo les estaria muy agradecido.
Un saludo y gracias

[MauXXI]

Hola, perdón si revivo el post.
¿Podrían contestar lo que komodo preguntó?
Es que me interesa mucho este tema.

[nicolaspar]

Para mostrar la imagen lo mejor es usar CSS mediante JS. La pones con display:none y luego haces un document.getElementById('eliddetuimagen').style.di splay = '';.

Eso lo encerras en una función JS, y luego de ejecutarlo haces un document.formulario.tuboton.disabled = true;

Un ejemplo:

Código:

<script language="JavaScript" type="text/javascript">
function enviar( pagina ){
 document.getElementById('preload').style.display = '';
 document.formulario.boton.disabled = true;
}
</script>

<form name="formulario" id="formulario">
<img src="images/preload.gif" id="preload" style="display:none" />
<input type="button" value="Enviar" id="boton" onclick="enviar()" />
</form>

[jiten]

Iniciado por nicolaspar

Para mostrar la imagen lo mejor es usar CSS mediante JS. La pones con display:none y luego haces un document.getElementById('eliddetuimagen').style.di splay = '';.

Eso lo encerras en una función JS, y luego de ejecutarlo haces un document.formulario.tuboton.disabled = true;

Un ejemplo:

Código:

<script language="JavaScript" type="text/javascript">
function enviar( pagina ){
 document.getElementById('preload').style.display = '';
 document.formulario.boton.disabled = true;
}
</script>

<form name="formulario" id="formulario">
<img src="images/preload.gif" id="preload" style="display:none" />
<input type="button" value="Enviar" id="boton" onclick="enviar()" />
</form>

Y si no quiero mostrar la imagen asi suelta, sino dentro de un DIV para que paarezca en medio de la pantalla ? como hago para hacer invisible ese DIV y luego visible ? mas aun, como hago para que a la para se muestre una "capa" semitransparente que cubra toda la pagina y sobre eso recien el DIV ?