¿gif de carga mientras se sube una foto?

leskolpykos · #1 (**permalink**) 20/02/2008, 13:47

pues ésta consulta la he encontrado en varios temas pero los uauarios esta pidiendo cosas más complejas, y algunos dicen que con php no se puede hacer. mi pregunta es: ¿como hacer para que aparezca un gif de "cargando" al uno hacer clic en el boton Cargar? asi como aparece aqui en el foro cuando uno de la clic al boton Editar

que el gif aparezca en equis sitio mientras e está subiendo el archivo. quizá suene como inutil o quiza se piense que es simpleartificie de lujo, pero en mi caso que la ventana de carga no tiene barra de estado, al usuario le resulta bien ver ese gif y sabe que hay algo procesandose ya que no ve barra de estado

es posible o no con php como dicen por alli? como lo hicieron aquí en el foro?

GatorV · #2 (**permalink**) 20/02/2008, 13:48

No se hace con PHP, si no con JavaScript.

Te muevo al foro indicado.

Saludos.

leskolpykos · #3 (**permalink**) 20/02/2008, 14:04

gracias GatorV no había leído que mi mensaje había sido movido y lo volví a escribir, pensé que no había cargado. mil disculpas.

caricatos · #4 (**permalink**) 20/02/2008, 16:48

Hola:

Mira este mensaje: Mostrar la carga de una imagen

Saludos

leskolpykos · #5 (**permalink**) 20/02/2008, 18:00

hola caricatos,

mucho antes de escribir aqui ya había visto ese consejo tuyo pero no sé porq no me funciona, creo q no se adaptarlo a mi form

cambié la orden onload por onclic no se si dedo hacerlo. te muestro el form para que veas

formulario

<form method="post" enctype="multipart/form-data" action="enviar.php">
<table width="100%" style="margin: auto;">
<tr>
<td style="width: 27%;">
<p align="center">
<input type="file" name="archivo" size="26" style="font-size: 8pt; " />
<input type="submit" value="Cargar archivo" style="font-size: 7pt; " /></td>
</tr>
</table>
</form>

en base a tu ejemplo, ésto lo coloque dentro del <head>

<script>
function tag(id) {return document.getElementById(id);}
function imagen(cual) {
tag("cargando").style.visibility = "visible";
tag("foto").src = cual;
}
</script>

pero como lo llamo para que se active al hacer clic en Cargar archivo?
en que momento utilizo este pedazo que tu colocaste en tu ejemplo?

<span style="position: relative; background-color: gray; padding: 0"
><img src="../fotos/flor.jpg" width="640" height="480" style="pargin: 0" onload="this.nextSibling.style.visibility = 'hidden'"
/><span id="cargando" style="position: absolute; background: white url(../dibujos/indicator.gif) no-repeat center center; top: 0; left: 0; width: 640px; height: 480px" />
</span>

gracias de antemano por responderme, ojala pudas asesorarme

caricatos · #6 (**permalink**) 20/02/2008, 23:34

Hola:

Me parece que este tema va a tener más cuestiones, porque si lo que quieres es mostrar una imagen que el usuario debe subir necesitarías de "la complicidad" del lenguaje que tengas en tu servidor (si no es eso debes corregirme)... sobre mostrar esas imágenes te recomiendo este artículo: Revisar las imágenes antes de subirlas

Sobre cambiar el onload por onclick, no lo veo en tu código, pero si lo cambias ya dejaría de funcionar.

Volviendo al tema de mostrar una imagen cuando se sube, y del artículo... tengo una página donde puedes verlo funcionando: Formulario (chequeo de imágenes)... para adaptar el script, deberías añadir la capa con el gif animado encima del iframe, y adaptar el script al del evento onchange del campo file...

Intentalo, y trataremos de ayudarte.

Saludos

leskolpykos · #7 (**permalink**) 20/02/2008, 23:41

hola caricatos!

en efecto no entendiste lo que necesito, al principio si lo habías entendido, te doy un ejemplo aqui mismo en el foro

cuando escribas un mensaje, haz clic en el boton EDITAR y veras q sale un circulito girando al lado del boton osea de que algo esta cargando

eso es lo unico q necesito, q cuando le de clic al boton salga ese gif para q el usuario sepa q espere pues.. espero ahora si me comprendas, a ver si me puedes asesorar

caricatos · #8 (**permalink**) 21/02/2008, 00:35

Hola:

Aunque entiendo lo que quieres, todavía no tengo claro como lo vas a usar, porque tanto para mostrar el gif como para ocultarlo, necesitas un evento... el de mostrar es evidentemente el de pulsar el botón, entonces a ese botón debes añadir

Código:

tag("cargando").style.visibility = "visible";

, pero para ocultarlo en el caso de cargar una imagen o cargar una página se trataría de load.

He retocado el formulario de antes para mostrar un gif animado mientras se carga la imagen: Formulario (chequeo de imágenes) (es otra url)... y simplemente le he añadido el tratamiento del evento así:

Código:

<iframe  onload="tag('cargando').style.visibility = 'hidden'" ...

El proceso siempre tiene que ser el mismo... un evento para mostrar una capa y otro para ocultarla... como si se tratase de un rollover.

Saludos

leskolpykos · #9 (**permalink**) 24/02/2008, 06:27

bueno,

en vista de lo dificil que parece ser ésto, que me aconsejas tu sobre que otra cosa puedo usar para que el usuario sepa que su archivo se está subiendo? q otro método puedo aplicarle para indicarle q espere? porq creo q el bendito circulito girando nunca va a aparecer como aqui

Panino5001 · #10 (**permalink**) 24/02/2008, 06:43

Colocá el código de tu formulario de entrada de datos y tu página de proceso y te mostraremos cómo hacerlo.

leskolpykos · #11 (**permalink**) 25/02/2008, 10:36

bueno tengo dos archivos, uno q es el formulario y el otro es el php q hace el trabajo..

***** formulario *****
<form method="post" enctype="multipart/form-data" action="enviar.php">
<table width="100%" style="margin: auto;">
<tr>
<td style="width: 27%;"><b><?=$msg?></b></td>
</tr>
<tr>
<td style="width: 27%;">
<p align="center">
<input type="file" name="archivo" size="26" style="font-family: Verdana; font-size: 8pt; border: 1px solid #C0C0C0" />
<input type="submit" value="Cargar archivo" style="font-family: Verdana; font-size: 7pt; border: 1px solid #808080; " /></td>
</tr>
</table>
</form>

***** archivo php *****
<?php
include("config.php");

# Si la carpeta no existe la creamos y le aplicamos los permisos.
if(!file_exists($carpeta_archivos))
{
mkdir($carpeta_archivos);
@chmod($carpeta_archivos, 0777);
}

# Verificamos que este setiado el archivo.
if($_FILES['archivo'])
{
# Verificamos que su tamaño sea mejor que los bytes que as puesto en la configuración.
if((1000 * $bytes_max) > $_FILES['archivo']['size'])
{
# Seteamos las variables para mejor facilidad
$tmp = $_FILES['archivo']['tmp_name'];
$name = $_FILES['archivo']['name'];
$ahora = $carpeta_archivos.'/'.$name;

# Movemos el archivo a la carpeta
move_uploaded_file($tmp, $ahora);

# Nos movemos a equis página .php
header("Location: cargando.php");
}
else
header("Location: cargando.php?errno=1&errmsg=Su archivo excede los ".$bytes_max."bytes.");
}
else
header("Location: cargando.php?errno=1&errmsg=No ah seleccionado ningun archivo.");

?>

ahora bien.. yo agregué lo q me dio caricatos pero no hace nada, creo q lo agregué mal, la verdad es que no veo necesario q sea el bendito circulito girando, solo quisiera que apareciera algo al darle clic al boton cargar y que el usuario vea que se esta subiendo su archivo, ya que no hay barra de estado

Panino5001 · #12 (**permalink**) 25/02/2008, 15:43

Simplifiqué un poco el código y lo puse todo en la misma página (luego colocalo como necesites). Pero sería algo así:

Código PHP:

  <?php
if($_FILES['archivo']){
    if(102400 > $_FILES['archivo']['size']){
        $tmp = $_FILES['archivo']['tmp_name'];
        $name = $_FILES['archivo']['name'];
        if(move_uploaded_file($tmp, $name)){
            echo '
            <script>
            parent.document.getElementById("loading").style.display="none";
            parent.document.getElementById("mensaje").innerHTML="Archivo grabado correctamente";
            old_f=parent.document.getElementById("archivo");
            new_f=parent.document.createElement("input");
            new_f.type="file";
            new_f.name="archivo";
            new_f.value="";
            new_f.id="archivo";
            new_f.className="campoArchivo";
            old_f.parentNode.replaceChild(new_f,old_f);
            </script>';
            exit;
        }
    }
echo '
            <script>
            parent.document.getElementById("loading").style.display="none";
            parent.document.getElementById("mensaje").innerHTML="El archivo no pudo grabarse.";
            old_f=parent.document.getElementById("archivo");
            new_f=parent.document.createElement("input");
            new_f.type="file";
            new_f.name="archivo";
            new_f.value="";
            new_f.id="archivo";
            new_f.className="campoArchivo";
            old_f.parentNode.replaceChild(new_f,old_f);
            </script>';
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
.campoArchivo{font-family: Verdana; font-size: 8pt; border: 1px solid #C0C0C0}
</style>
</head>

<body><form target="pepe" method="post" enctype="multipart/form-data" action="<?php echo basename($_SERVER['PHP_SELF'])?>" onsubmit="if(document.getElementById('archivo').value.length)document.getElementById('loading').style.display='inline'">
<table width="100%" style="margin: auto;">
<tr>
<td style="width: 27%;"><div id="mensaje" style="font-family:Verdana, Arial, Helvetica, sans-serif; color:red"></div></td>
</tr>
<tr>
<td style="width: 27%;">
<p align="center">
<input type="file" name="archivo" id="archivo" size="26" class="campoArchivo" />
<input type="submit" value="Cargar archivo" style="font-family: Verdana; font-size: 7pt; border: 1px solid #808080; " />
&nbsp;<img id="loading" src="ajaxloader.gif" width="16" height="16" style="display:none" /></td>
</tr>
</table>
</form>
<iframe name="pepe" width="1" height="1" style="visibility:hidden"></iframe>
</body>
</html>

Notar el iframe, su nombre y el target del formulario. ajaxloader.gif puede ser la imagen sugerida por caricatos (

)

leskolpykos · #13 (**permalink**) 25/02/2008, 16:34

woaaoooo funciona perfecto!!! ya pensaba q no era posible

gracias panino5001 y caricatos!!!!
Gracias por su ayuda!!

caricatos · #14 (**permalink**) 25/02/2008, 16:39

Hola:

Solo quiero recalcar lo que menciona Panino5001 (¡Hola

!) sobre el target del formulario y el nombre (name) del iframe, porque para subir ficheros solo puede hacerse con un formulario (el método post y el atributo enctype="multipart/form-data")...
Sin un target a una ventana distinta de la del formulario no es posible implementar el efecto que quieres, y en tu código no se ve el atributo target del form...
El ejemplo de estos foros no vale para subir imágenes porque creo que usa un objeto ajax... (la verdad es que no me he fijado...) y en ese caso no son necesarios los iframes o ventanas (a no ser que se creen dinámicamente)

Saludos

Parece que he tardado en responder más de lo normal...

henryrasta · #15 (**permalink**) 03/02/2010, 13:46

Hermanos necesito su ayuda para poder hacer casi lo mismo pero con link dentro de la página y al hacer clic en el link se valla a otra página pero antes de este proceso quiero que salga una ventana semajente a la que tu tienes que diga cargando porfavor alguién me puede ayudar....

si pueden me gustaría realizar todo esto con ustedes en tiempo real aqui les dejo mi correo [email protected] de verdad necesito su ayuda

henryrasta · #16 (**permalink**) 03/02/2010, 13:48

y si les soy sincero primera vez en mi vida que trabajo con este lenguaje porfavor ayuda

JavierB · #17 (**permalink**) 03/02/2010, 13:52

Hola henryrasta

Te recuerdo el aviso que había al final de este tema y que parece que no has leído.

Tema cerrado.