[SOLUCIONADO] Asunto complejo entre PHP, iframes y javascript

[jorgemibanez]

Hola a todos, pues bien, tengo que hacer lo siguiente aunque sea muy enredado (y haya otra manera de hacerlo más fácil), agradezco vuestra ayuda.

Tengo un <div>, dentro de ese <div> hay un iframe, este iframe tiene un <form type="file" name="..." id="..." ...> que al momento de abrir el archivo que selecciona lo guarda en una carpeta del servidor de forma automática y te abre otro iframe, este otro iframe tiene otro <div> que se supone debería mostrar el archivo previamente cargado por el form del otro iframe. Pues no se como hacer esto, que el 2º iframe dentro de su código html me muestre la imagen que el 1º iframe con el form subió al servidor.

Mis códigos (lo relevante):

* Doc. HTML que contiene 1º iframe:
...
<div>
<iframe scrolling="no" src="upload_profile_photo.html"></iframe>
</div>
...

* upload_profile_photo.html:
...
<form id="form_upload_photo" enctype="multipart/form-data" name="frmMain" action="upload_image.php" method="post">

<input name="filUpload" id="filUpload" type="file" onchange="document.getElementById('form_upload_pho to').submit()">

*Este (filUpload) es el que selecciona la imagen del ordenador y la sube*

</form>
...

* upload_image.php:
...
<img id="imgAvatar" src="select_image.png">

Este src="..." debería mostrar la imagen subida con el form del iframe puesto arriba.
...

Alguna sugerencia, es algo tedioso así que tampoco espero que hagan el código pero si me pueden recomendar algún manual, función o algo que estudiar para hacer lo de arriba se los agradeceré.

[danneg]

déjame ver si entendí.
Quieres hacer una imitación de carga asincrónica de imágenes (subir una imagen sin recargar el sitio y al mismo tiempo mostrarla), no es así?.

Bien, pues hay muchas maneras de hacer y tú te estás complicando la vida.

Para comenzar, usas iframes dentro de iframes y pues, está muy mal hecho; el primer iframe te basta para hacer lo que pides.

Segundo, hay una tecnología nueva que se llama AJAX y te permite enviar datos por post a tu servidor de manera asincrónica (y muy efectiva). También existe una nueva librería JS llamada FileReader que te facilita todo ésto (incluso visualizar la imagen sin tener que subirla a tu servidor).

Puedes ver todo ésto funcionando en http://dannegm.pro/picboard/ y puedes ver el código en https://github.com/dannegm/picboard.

Si quieres que te explique más a detalle cómo se hace ésto, contáctame :)

[jorgemibanez]

Iniciado por danneg

déjame ver si entendí.
Quieres hacer una imitación de carga asincrónica de imágenes (subir una imagen sin recargar el sitio y al mismo tiempo mostrarla), no es así?.

Bien, pues hay muchas maneras de hacer y tú te estás complicando la vida.

Para comenzar, usas iframes dentro de iframes y pues, está muy mal hecho; el primer iframe te basta para hacer lo que pides.

Segundo, hay una tecnología nueva que se llama AJAX y te permite enviar datos por post a tu servidor de manera asincrónica (y muy efectiva). También existe una nueva librería JS llamada FileReader que te facilita todo ésto (incluso visualizar la imagen sin tener que subirla a tu servidor).

Puedes ver todo ésto funcionando en http://dannegm.pro/picboard/ y puedes ver el código en https://github.com/dannegm/picboard.

Si quieres que te explique más a detalle cómo se hace ésto, contáctame :)

Lo que sucede con ajax es que le encuentro muchos incovenientes, pero ese es otro tema.

El fileReader lo he utilizado, y sin necesidad de iframes, ciertamente; pero solo sirve para mostrar la imagen antes de subirla (hasta donde yo se) y la razón por la cual estoy implementando esto de esta manera es para editar (cortar) la imagen con cierto código jquery, pero solo puedo realizar esto si ya está subida la foto, todo lo que hecho arriba es intentando facilitar al máximo la usabilidad de la página al usuario.

[ocp001a]

Como te han comentado, un iframe dentro de otro es complicar las cosas.

Si tienes un iframe puedes dirigir el archivo subido a él mismo, de modo que cuando se refresque contenga ya la imagen previamente subida. La lista de imágenes subidas las puedes controlar mediante $_GET, o bien si la subes a una carpeta específica por usuario, las puedes desplegar leyendo todas las imágenes de dicho directorio.

Todo esto sin usar nada de ajax.

[danneg]

Así es, el primer iframe basta para hacer las cosas, aunque me sigo inclinando con el método AJAX, ya que FileReader también te envía este dato por POST como yo lo sugiero y posteriormente también puedes implementar tu plug-in que recorta la imagen.

Pero por otro lado, después te traeré un ejemplo de algo que hice similar a lo que tu quieres pero con iframes

[jorgemibanez]

Iniciado por danneg

Así es, el primer iframe basta para hacer las cosas, aunque me sigo inclinando con el método AJAX, ya que FileReader también te envía este dato por POST como yo lo sugiero y posteriormente también puedes implementar tu plug-in que recorta la imagen.

Pero por otro lado, después te traeré un ejemplo de algo que hice similar a lo que tu quieres pero con iframes

Vale, haciendo caso a lo que ustedes me dicen , usaré un solo iframe; en primera instancia, aparece lo siguiente (HTML) cuando el usuario entra la página de subida de imagen:

PD: He puesto lo esencial, los estilos y etiquetas que ya sabemos que deben ir (<html>, <head>, <body>, etc...) no las he puesto.

...
<iframe scrolling="no" src="upload_profile_photo.html""></iframe>
</div>
...

* (Lo que muestra el iframe) upload_profile_photo.html tiene el siguiente código:
...
<form id="form_upload_photo" enctype="multipart/form-data" name="frmMain" action="upload_image.php" method="post">

<input name="filUpload" id="filUpload" type="file" onchange="document.getElementById('form_upload_pho to').submit()">
//Este código lo que hace es que automáticamente sube la foto cuando el usuario la selecciona usando upload_image.php.//

<input id="cancel_upload_photo" type="reset" value="Cancelar">

</form>
...

upload_image.php:

<?php
$target = "images/";
$target = $target . basename( $_FILES['filUpload']['name']);
$filUpload_size = $_FILES['filUpload']['size'];
$filUpload_type = $_FILES['filUpload']['type'];
$ok=1;

//Nuestra condición de tamaño
if ($filUpload_size > 350000)
{
echo "Este archivo es demasiado grande<br>";
$ok=0;
}

//Nuestra condición de límite de tipo de archivo
if ($filUpload_type =="text/php")
{
echo "No se aceptan archivos PHP<br>";
$ok=0;
}

//Aquí chequeamos que $ok no fue definida como 0 por error
if ($ok==0)
{
Echo "Lo lamentamos, tu archivo no fue subido";
}

//Si todo está bien, lo subimos
else
{
if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target))
{
echo '
//
Bueno aquí va otro código HTML, que aparece dentro del mismo iframe pero es un HTML distinto al de subida de imagen, se supone que este está orientado a su edición, por lo tanto debe de mostrar la imagen subida previamente y posteriormente guardarla.
//
';
}else{
echo '<script>window.location="welcome.html"</script>';
}
?>

Para lo de arriba se me ha ocurrido lo siguiente, a ver que opinan ustedes:

Visualizar la imagen subida:
Esto en el head:
<script language="JavaScript">
function showPreview(ele)
{
$('#imgAvatar').attr('src', ele.value); // for IE
if (ele.files && ele.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgAvatar').attr('src', e.target.result);
}
reader.readAsDataURL(ele.files[0]);
}
}
</script>

y esto en body:
<img id="imgAvatar" src="Es aquí donde me lío, ¿Cómo hago que muestre la última subida?, suponiendo que tenga xxxx usuarios y todos estén subiendo fotos de perfil, ¿Cómo no confundirlas?">

He pensado en crear una base de datos y guardo el nombre junto a un id auto-increment pero y ¿Si el usuario cambia constantemente de foto de usuario qué src="??" poner para que muestre la nueva seleccionada?

Bueno, yo espero no aburrirles con esto, en todo caso agradezco sus comentarios y ayudas.

[danneg]

es simple, en la función move_uploaded_file($_FILES['filUpload']['tmp_name'], $target) especificas dónde se guardará la imagen, así que, lo mas sencillo es imprimir el $target en el mismo archivo upload_image.php

Código PHP:

<img src="<?php echo $target; ?>" />
 

[0123]

Hola jorgemibanez,

Creo que debes simplicar las cosas, te cuento como lo hago yo:

Tenemos:
-Un iframe de name "mi_gran_mundo"
-Un form con target a "mi_gran_mundo" y de id "mi_bonito_form"
-Un input tipo "file"
-Un input tipo "submit"

Proceso:
1 - Usuario selecciona el archivo.
2 - Pulsa en el submit
3 - Se ejecuta el formulario POST ocultando el campo "file" y poniendo "cargando"
4 - El formulario envia su petición via el IFRAME
5 - El servidor recibe la informacion, la procesa y "guarda la imagen donde tu quieras"
6 - El servidor devuelve un javascript simple con "window.parent.mi_super_image('http://miweb.com/subidas/imagen_subida.jpg');"
7 - En la head padre tienes una funcion llamada "mi_super_image" que crea un objeto IMG con el parametro que le llega.

...

Creo que es la forma más simple. Pero SIEMPRE se complican estas cosas. Yo ya no se de cuentas formas habre subido una imagen a un servidor.

Te recomiendo... que si este metodo es para una adminitración "de verdad", necesitarás subida "multiple", es por jorobar, jaja. Para ello, no se como anda el HTML5, pero a mi hace unos años me toco usar FLASH, y aunque lo odie... la comodidad era insuperable.

Un saludo,

0123

[jorgemibanez]

Iniciado por danneg

es simple, en la función move_uploaded_file($_FILES['filUpload']['tmp_name'], $target) especificas dónde se guardará la imagen, así que, lo mas sencillo es imprimir el $target en el mismo archivo upload_image.php

Código PHP:

<img src="<?php echo $target; ?>" />
 

aparece un símbolo de imagen en el lugar donde debería aparecer la foto, el código funciona; pero no muestra la imagen ¿Qué será?, el google chrome (Inspeccionar elemento) me muestra este error: Failed to load resource: the server responded with a status of 403 (Forbidden)

Algún consejo.

[danneg]

Sí, eso se debe a los permisos que tengas para mostrar los archivos. Revisa si tu .htaccess no bloquea nada, y prueba cambiar los permisos desde FTP a 755 (en filezilla, da click derecho al archivo, selecciona "Permisos", y en el recuadro que te aparece dale 755).

PD. También te recomiendo cambiarle los permisos a la carpeta donde se guardan tus imágenes.

[jorgemibanez]

Iniciado por danneg

Sí, eso se debe a los permisos que tengas para mostrar los archivos. Revisa si tu .htaccess no bloquea nada, y prueba cambiar los permisos desde FTP a 755 (en filezilla, da click derecho al archivo, selecciona "Permisos", y en el recuadro que te aparece dale 755).

PD. También te recomiendo cambiarle los permisos a la carpeta donde se guardan tus imágenes.

He revisado el .htaccess y no bloquea nada. No estoy usando cliente ftp con esta página, la estoy probando de forma local con wamp; ¿Cambiarle permisos a la carpeta?

[jorgemibanez]

Como podrás ver esto es lo que sucede. Sin embargo, no lo entiendo, la imagen está guardada en images.

[jorgemibanez]

Iniciado por jorgemibanez

Como podrás ver esto es lo que sucede. Sin embargo, no lo entiendo, la imagen está guardada en images.

Bueno, he estado intentando arreglar y lo que he obtenido es esto:

GET http://localhost/%3C?php%20echo%20$target;?%3E 403 (Forbidden)

[danneg]

T_T ... tu archivo tiene terminación .php ?

[jorgemibanez]

Iniciado por danneg

T_T ... tu archivo tiene terminación .php ?

Si, es .PHP;

[jorgemibanez]

Iniciado por jorgemibanez

Si, es .PHP;

PD: Es un error 403 Forbidden, no da permiso para entrar al servidor;

[danneg]

Podrías mostrar la parte de tu archivo php donde imprimes la imagen?

[jorgemibanez]

Iniciado por danneg

Podrías mostrar la parte de tu archivo php donde imprimes la imagen?

Bueno, pues debería ser este: <img name="profile_photo" src="<?php echo $target;?>"/>

Es un php dentro de un html.


Y esta está al comienzo:

$target = "images/";
$target = $target . basename( $_FILES['filUpload']['name']);
$filUpload_size = $_FILES['filUpload']['size'];
$filUpload_type = $_FILES['filUpload']['type'];

...
...

//Si todo está bien, procedemos a subirlo.
else
{
if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target))
{
echo '
.......HTML donde está el php que imprime la imagen (mostrado al comienzo)....

Lo más curioso es que las imágenes subidas aparecen en la carpeta "images" más no se le da la gana de mostrarlas.

Agradezco vuestra paciencia, pero se me ha complicado mucho esto así que lo mejor será cambiar de planes y no utilizar este código.

[jorgemibanez]

Iniciado por jorgemibanez

Bueno, pues debería ser este: <img name="profile_photo" src="<?php echo $target;?>"/>

Es un php dentro de un html.


Y esta está al comienzo:

$target = "images/";
$target = $target . basename( $_FILES['filUpload']['name']);
$filUpload_size = $_FILES['filUpload']['size'];
$filUpload_type = $_FILES['filUpload']['type'];

...
...

//Si todo está bien, procedemos a subirlo.
else
{
if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target))
{
echo '
.......HTML donde está el php que imprime la imagen (mostrado al comienzo)....

Lo más curioso es que las imágenes subidas aparecen en la carpeta "images" más no se le da la gana de mostrarlas.

Agradezco vuestra paciencia, pero se me ha complicado mucho esto así que lo mejor será cambiar de planes y no utilizar este código.

Bueno, cambio de planes momentáneo, intente darme una última oportunidad para poner a funcionar esto y me he encontrado con lo siguiente:

Cuando pongo esto en la barra de direcciones

http://localhost/images/

Me aparecen en el navegador las imágenes que están allí y si doy clic en ellas se imprimen en la página; el problema está cuando se intenta entrar a los directorios haciendo un llamado con php desde los iframes. Bueno algo raro esto, pero ahí voy viendo.

[danneg]

Jajaja ya me hice bolas XD

[danneg]

No mira, lo que pasa es que (si analizas la captura de pantalla) no es que exista un error 403 ni que el navegador no quiera mostrarlas, sino que al llamar a una imagen, la imagen imprime lo siguiente:

http://localhost/%3C?php%20echo%20$target;?%3E

Cosa que, no es una imagen (o sí?)

Si analizas bien ésto, está imprimiendo el código php (cosa que no debe de pasar).

http://localhost/<?php echo $target;?>

Así que algo estás haciendo mal, por ejemplo... tal vez estes anidando etiquetas dentro de tu archivo php.

<?php echo <?php asdasd(); ?>; ?>

Cosa que lo imprimirá como texto.

Cuando yote pregunté por tu código, yo quería ver todo el archivo, para ver en dónde estás fallando, ya que muchas veces el error no es en la parte que uno piensa.

Saludos.

[jorgemibanez]

Iniciado por danneg

No mira, lo que pasa es que (si analizas la captura de pantalla) no es que exista un error 403 ni que el navegador no quiera mostrarlas, sino que al llamar a una imagen, la imagen imprime lo siguiente:



Cosa que, no es una imagen (o sí?)

Si analizas bien ésto, está imprimiendo el código php (cosa que no debe de pasar).



Así que algo estás haciendo mal, por ejemplo... tal vez estes anidando etiquetas dentro de tu archivo php.



Cosa que lo imprimirá como texto.

Cuando yote pregunté por tu código, yo quería ver todo el archivo, para ver en dónde estás fallando, ya que muchas veces el error no es en la parte que uno piensa.

Saludos.

Bien, pues ahí va:


<?php
session_start();
mysql_connect("localhost","root", "");
$target = "images/";
$target = $target . basename( $_FILES['filUpload']['name']);
$filUpload_size = $_FILES['filUpload']['size'];
$filUpload_type = $_FILES['filUpload']['type'];
$ok=1;

if ($filUpload_size > 350000)
{
echo "Tu archivo es muy grande<br>";
$ok=0;
}

if ($ok==0)
{
Echo "Lo lamentamos, tu archivo no se pudo subir, intenta de nuevo";
}

else
{
if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target))
{
echo '

<html>

<head>
<meta charset="utf-8">
</head>

<body>

<div>
<img src="<?php echo $target;?>"/>
</div>

</body>

</html>
';
}
else
{
echo "Hubo un problema intentado subir el archivo"
}
}
?>

Este input está en formulario (HTML), cuando seleccionas la imagen, el onchange llama al código de arriba; no contiene php (el .html) y lo demás del documento no tiene que ver con lo de este tema; así pues:

<input name="filUpload" id="filUpload" type="file" onchange="document.getElementById('form_upload_pho to').submit()">

[danneg]

En ésta parte

Código HTML:

echo '
 
<html>
 
<head>
<meta charset="utf-8">
</head>
 
<body>
 
<div>
<img src="<?php echo $target;?>"/>
</div>
 
</body>
 
</html>
';
 

Está ypasa lo que te decía; primero que nada quita las etiquetas php y la función echo, depués, te recomiendo usar EOFILE para imprimir un contenido multi-línea, o ya en su defecto, hacer uso correcto de las etiquetas php

Ejemplo 1

Código PHP:

if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target))
{ 
 
$mythml = <<<EOFILE
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<div>
<img src="$target" />
</div>
 
</body>
</html>
EOFILE;
 
echo $myhtml;
}
 

Ejemplo 2

Código PHP:

<?php
if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target)) :
?>
 
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<div>
<img src="<?php echo $target;?>"/>
</div>
 
</body>
</html>
 
<?php
endif;
?>
 

[jorgemibanez]

Iniciado por danneg

En ésta parte

Código HTML:

echo '
 
<html>
 
<head>
<meta charset="utf-8">
</head>
 
<body>
 
<div>
<img src="<?php echo $target;?>"/>
</div>
 
</body>
 
</html>
';
 

Está ypasa lo que te decía; primero que nada quita las etiquetas php y la función echo, depués, te recomiendo usar EOFILE para imprimir un contenido multi-línea, o ya en su defecto, hacer uso correcto de las etiquetas php

Ejemplo 1

Código PHP:

if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target))
{ 
 
$mythml = <<<EOFILE
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<div>
<img src="$target" />
</div>
 
</body>
</html>
EOFILE;
 
echo $myhtml;
}
 

Ejemplo 2

Código PHP:

<?php
if(move_uploaded_file($_FILES['filUpload']['tmp_name'], $target)) :
?>
 
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<div>
<img src="<?php echo $target;?>"/>
</div>
 
</body>
</html>
 
<?php
endif;
?>
 

Ha funcionado, muchas gracias, por tu tiempo y ayuda; Hasta pronto

[danneg]

hasta pronto :D