Utlizar Iframe para simular AJAX

koolj · #1 (**permalink**) 09/11/2012, 07:20

Hola muchach@s.

Estoy queriendo hacer un formularion con algunos datos y una imagen que necesito que se guarde en el servidor.

Para guardar la imagen uso PHP y no hay problema , y al querer usar AJAX me encuentro que por algunos motivos no se puede y que se puede simular con un iframe.

Bueno lo pude hacer, pero me falta un detalle, no tengo idea de como hacer que el GIF que aparece cuando se envia el formulario se desaparesca cuando la imagen termine de cargarse en el servidor.

Aca les dejo el código para que lo revisen y agradeceria su ayuda

Código HTML

Código HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo de subida</title>
<script>
function iniciar(){
    document.getElementById('carga').style.visibility = 'visible';
    return true;
}
</script>
<style type="text/css">
#carga{	
	visibility:hidden;
}
</style>
</head>

<body>
<form name="form1" method="post" action="archivos.php" enctype="multipart/form-data" target="la_otra_pagina" onSubmit="iniciar();">
  <table width="50%" border="0">
    <tr>
      <td>Nombre:</td>
      <td><input type="text" name="txtNombre" id="textfield"></td>
    </tr>
    <tr>
      <td>Foto:</td>
      <td>
      <input type="file" name="txtFoto" id="fileField"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" value="mostrar"></td>
    </tr>    
  </table>
</form>
<iframe name="la_otra_pagina" src="archivos.php" frameborder="0"></iframe>
<div id="carga"><img src="load.gif" width="220" height="19" alt="load"></div>
</body>
</html>

Aca el archivos.php

Código PHP:

  if($_POST) 
    { 
        $nombre = $_POST['txtNombre']; 
        $nombre_archivo = $_FILES['txtFoto']['name'];         
        $origen = $_FILES['txtFoto']['tmp_name'];         
        $destino = "subidas/".$nombre_archivo;         
         
        if (move_uploaded_file($origen,$destino)) 
        { 
            echo $nombre; 
               echo "<nr/>El archivo ha sido cargado correctamente.";             
            echo "<br/>".$destino; 
                } 
        else 
        { 
               echo "Ocurrió algún error al subir el fichero. No pudo guardarse."; 
                } 
    }

marlanga · #2 (**permalink**) 09/11/2012, 07:33

En el php si en vez de poner el mensaje de éxito pones la imagen <img> como único elemento y con el src bien puesto, queda mejor.
En el HTML del iframe tienes que poner tambien un javascript que "llame" al padre del iframe (es decir, al window de la página que contiene la etiqueta <iframe> a través de la ruta window.parent (dentro de la página que es cargada en el iframe).

koolj · #3 (**permalink**) 12/11/2012, 08:38

Cita:

Iniciado por marlanga

En el php si en vez de poner el mensaje de éxito pones la imagen <img> como único elemento y con el src bien puesto, queda mejor.
En el HTML del iframe tienes que poner tambien un javascript que "llame" al padre del iframe (es decir, al window de la página que contiene la etiqueta <iframe> a través de la ruta window.parent (dentro de la página que es cargada en el iframe).

Gracias Marlanga.

Te agradeceria que me expliques mejor lo del javascript en el iframe, no entiendo

stramin · #4 (**permalink**) 12/11/2012, 08:56

lo que marlanga quiere decir es que en el contenido del iframe, o sea donde muestras la imagen pongas tambien un bloque de javascript para que haga desaparecer la imagen de carga que tienes en el la pagina, para esto debes usar "parent" que lo que hace es hacer referencia al documento superior, por ejemplo

window.parent.laimagendecarga.style.display='none' ;

koolj · #5 (**permalink**) 12/11/2012, 10:07

Estoy haciendo lo que me dicen y no pasa nada, la imagen no se ve, sube el archivo pero la imagen no aparece. Me podrian colocar un ejemplo???

caricatos · #6 (**permalink**) 12/11/2012, 10:15

Hola:

Tal vez te sirva este artículo: Revisar las imágenes antes de subirlas

Saludos

stramin · #7 (**permalink**) 12/11/2012, 10:17

wait! no habías dicho que querías hacerla desaparecer? D:

Cita:

Bueno lo pude hacer, pero me falta un detalle, no tengo idea de como hacer que el GIF que aparece cuando se envia el formulario se desaparesca cuando la imagen termine de cargarse en el servidor.

lo que te estamos diciendo es como hacerla desaparecer, si no has podido hacer que se vea entonces deberías reformular la pregunta.

emprear · #8 (**permalink**) 12/11/2012, 11:12

Cita:

Iniciado por koolj

Estoy haciendo lo que me dicen y no pasa nada, la imagen no se ve, sube el archivo pero la imagen no aparece. Me podrian colocar un ejemplo???

La idea es que en tu php generes la script, ejemplo

Código PHP:

Ver originalif (move_uploaded_file($origen,$destino)) 
        { 
echo "
<script>
parent.iniciar('ok');
</script>
";
                }

y en la página principal

Código Javascript:

Ver original<script>
function iniciar(valor){
if(valor == 'ok'){
document.getElementById('carga').style.visibility = 'hidden';
}
}
</script>

De la misma manera podés generar otros mensajes, no hace falta generar la respuesta en el propio php

Lo que no queda claro es como hacés aparecer el gif en el envío, ya que por defecto está hidden. No veo ningún evento onsubmit.

SAludos

Saludos

koolj · #9 (**permalink**) 12/11/2012, 14:01

Lo logre

......................Gracias a todos en especial a emprear me sirvió mucho tu ejemplo y si te fijas bien en el formulario tiene onSubmit="iniciar();" que muestra el gif.

Bueno les dejo el código completo funcionando y de nuevo muchas gracias

La Página principal

Código HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo de subida</title>
<script>
function iniciar(){
    document.getElementById('carga').style.visibility = 'visible';
}

function detener(valor){
	if(valor == 'stop'){
		document.getElementById('carga').style.visibility = 'hidden';
	}
}
</script>
<style type="text/css">
#carga{	
	visibility:hidden;
}
</style>
</head>

<body>
<form name="form1" method="post" action="archivos.php" enctype="multipart/form-data" target="la_otra_pagina" onSubmit="iniciar();">
  <table width="50%" border="0">
    <tr>
      <td>Nombre:</td>
      <td><input type="text" name="txtNombre" id="textfield"></td>
    </tr>
    <tr>
      <td>Foto:</td>
      <td>
      <input type="file" name="txtFoto" id="fileField"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" value="mostrar"></td>
    </tr>    
  </table>
</form>
<div id="carga"><img id="cargando" src="load.gif" width="220" height="19" alt="load"></div>
<iframe name="la_otra_pagina" src="archivos.php" frameborder="0"></iframe>
</body>
</html>

El código]de archivos.php

Código PHP:

      if($_POST) 
    {             
        $nombre = $_POST['txtNombre']; 
        $nombre_archivo = $_FILES['txtFoto']['name'];         
        $origen = $_FILES['txtFoto']['tmp_name'];         
        $destino = "subidas/".$nombre_archivo;         
        if(move_uploaded_file($origen,$destino)) 
        { 
            echo ' 
            <script> 
                parent.detener("stop"); 
            </script> 
            '; 
        } 
    }

emprear · #10 (**permalink**) 12/11/2012, 14:07

Cita:

Iniciado por koolj

Lo logre

......................Gracias a todos en especial a emprear me sirvió mucho tu ejemplo y si te fijas bien en el formulario tiene onSubmit="iniciar();" que muestra el gif.

Bueno les dejo el código completo funcionando y de nuevo muchas gracias

La Página principal

Código HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo de subida</title>
<script>
function iniciar(){
    document.getElementById('carga').style.visibility = 'visible';
}

function detener(valor){
	if(valor == 'stop'){
		document.getElementById('carga').style.visibility = 'hidden';
	}
}
</script>
<style type="text/css">
#carga{	
	visibility:hidden;
}
</style>
</head>

<body>
<form name="form1" method="post" action="archivos.php" enctype="multipart/form-data" target="la_otra_pagina" onSubmit="iniciar();">
  <table width="50%" border="0">
    <tr>
      <td>Nombre:</td>
      <td><input type="text" name="txtNombre" id="textfield"></td>
    </tr>
    <tr>
      <td>Foto:</td>
      <td>
      <input type="file" name="txtFoto" id="fileField"></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><input type="submit" value="mostrar"></td>
    </tr>    
  </table>
</form>
<div id="carga"><img id="cargando" src="load.gif" width="220" height="19" alt="load"></div>
<iframe name="la_otra_pagina" src="archivos.php" frameborder="0"></iframe>
</body>
</html>

El código]de archivos.php

Código PHP:

      if($_POST) 
    {             
        $nombre = $_POST['txtNombre']; 
        $nombre_archivo = $_FILES['txtFoto']['name'];         
        $origen = $_FILES['txtFoto']['tmp_name'];         
        $destino = "subidas/".$nombre_archivo;         
        if(move_uploaded_file($origen,$destino)) 
        { 
            echo ' 
            <script> 
                parent.detener("stop"); 
            </script> 
            '; 
        } 
    }

mil disculpas @koolj, si ahi está, no le di al scroll del code y se me pasó por alto.
Te agrego, en lugar de hacerle un hidden al div carga, podrías hacerlo un innerHTML = '"Archivo subido correctamente";

Saludos

koolj · #11 (**permalink**) 12/11/2012, 14:10

Cita:

Iniciado por emprear

mil disculpas @koolj, si ahi está, no le di al scroll del code y se me pasó por alto.
Te agrego, en lugar de hacerle un hidden al div carga, podrías hacerlo un innerHTML = '"Archivo subido correctamente";

Saludos

ok Gracias....eso estaba pensando hacer.