como previsualizar imagenes de un formulario.... (iframe)

[roboty]

Hola, como tendria que hacer para previsualizar imagenes de un formulario antes de guardarlas en una base de datos, si alguien me puede dar los pasos a seguir o darme un enlace donde te lo explique, saludos.

[IsaBelM]

lee este tutorial escrito por caricatos

[roboty]

Hola IsaBelM gracias por el enlace, me lo leere y hos comento que tal me fue tanto para dudas o para lo que sea, saludos.

[roboty]

Hola de nuevo, el aporte esta muy bien pero realmente lo que quiero es un poco mas complejo todavia, seria lo siguiente, a traves de un formulario donde hay campos de textos y imagenes quiero mostrar la imagen una vez selecionada al lado y redimensionarla pero claro no se si esto es posible y posteriormente dar la opcion al cliente de previsualizar los datos incluido la imagen en otra ventana, si me pueden orientar a los pasos que debo seguir ya que no entiendo como hacerlo, espero que me haigan entendido, saludos.

[caricatos]

Hola:

Se puede, pero consume recursos que a veces es mejor ahorrar. Se pueden redimensionar las imágenes, pero en el servidor (un ejemplo: Caricaturas de grupos a color en acuarelas)

Por lo visto, lo que necesitas es programación de parte del servidor, así que si nos dices el lenguaje que soporta, lo moveremos al foro adecuado (también puedes reportar el mensaje)

Saludos

[roboty]

Hola caricatos, si mas o menos seria algo asin como el enlace que pusistes, bueno ya que es del lado del servidor si me quieres mover el post hacia php para que algun experto en php me pueda orientar en los pasos que tengo que tomar para conseguir esa dinamica, un saludo.

[caricatos]

Hola:

Tema movido desde javascript.

Resumiendo lo visto, los pasos a seguir serían (si no se plantea una solución mejor)
Al subir las imagenes guardarlas en variables de sesión:

<?php session_start();
...
if (!isset($_SESSION["imagen"]))
$_SESSION["imagen"] = array();

array_push($_SESSION["imagen"], file_get_contents($_FILES["imagen"]["tmp_name"]));

Y para mostrarlas como miniaturas usar imagecopyresampled o imagecopyresized...

Habrá que ver si quieres usar tamaños fijos o no.

Saludos

[roboty]

Hola caricatos, no lo acabo de entender ya que lo que quiero es mostrar las imagenes en el mismo formulario con variables de sesion es posible?o necesito ajax, espero que me aclares esta duda, saludos.

[roboty]

Ninguna idea de como lograr lo que quiero, en resumen lo que quiero es que en un formulario con un campo de texto y un campo tipo archivo lograr que cuando selecionas una imagen y sacas el cursor del campo mostrar al lado del campo (osea en el mismo formulario) la imagen seleciona pero redimensionada y claro todo esto sin recargar la pagina para no perder el dato del otro campo tipo texto, realmente no tengo claro como hacer esta dinamica, si alguien me puede dar alguna idea, saludos.

[GatorV]

Con AJAX no puedes subir archivos, vas a tener que usar un iframe oculto para hacer el upload del archivo, luego ya que lo tengas en el servidor hacer la redimensión del archivo, y mandarle el response por el iframe a tu formulario con la URL de la imagen redimensionada e inyectarla en el DOM de tu HTML.

No es un proceso sencillo, digamos yo diría algo mediano pero es posible de realizar si tienes los conocimientos necesarios.

[roboty]

Hola GatoV, se que no es facil pero de eso se trata de intentarlo para aprender, se que con ajax no puedo subir imagen, hay donde tengo mas dudas, dijistes con un usar un iframe oculto para hacer el upload del archivo, me puedes poner un ejemplo de esta parte?, una vez este la imagen subida entiendo que mediante ajax tengo que llamar a un archivo php que se encarge de hacer el resto, un saludo.

[GatorV]

Aqui tienes dos ejemplos:

http://www.webtoolkit.info/ajax-file-upload.html
http://plugins.jquery.com/project/iframe-post-form

Esos usan un iframe oculto para simular el upload y puedes ahí mismo retornar el resultado, no necesitas usar AJAX después para obtener la información ya que en el mismo proceso del upload puedes redimensionar y regresar la url de la imagen ya redimensionada.

Saludos.

[roboty]

Hola GatorV, gracias por tu explicacion y los ejemplos puestos, ahora intentare ponerlo a la practica, saludos.

[caricatos]

Hola:

La idea de las variables de sesión es porque teniendo el código de la imagen guardado, luego puedes decidir si guardar o no esa imagen... y en el ejemplo que puse, supuse que tal vez necesitabas más de una imagen, pero creo que no debes abusar y pensar en poner un límite... pero eso no lo estoy contemplando.

Cuando llega el archivo al iframe, llega a una página php, pero con cabecera html para poder devolver un resultado, y ese resultado, al ser un iframe, puedes pasarlo a la página "origen" con el objeto parent (deberías releer el artículo mío que te sugirió IsaBelM).

Con respecto a la redimensión, en principio debes generar la página original:

imagecreatefronstring($_SESSION["imagen"][0]);

Luego sacas las dimensiones con imagesX, imagesY; y con esas dimensiones obtienes las de las miniaturas (supongo que por la regla de tres), y creas la miniatura en blanco (imagecreate), para copiar la original redimensionada...

Yo mismo puse el código en otros mensajes... será cuestión de buscarlo (no tengo la referencia)...

Te recomiendo que empieces por el código del primer artículo (creo que está completo), y cuando funcione te pongas con las redimensiones.

Saludos

[roboty]

Hola caricatos, gracias por tu colaboracion bien eso mismo hare, analizare bien tu codigo y despues intentare la redimension, saludos.

[roboty]

Hola, ya estoy aqui otra vez, bueno caricatos decirte que tu codigo aun no me lo he mirado ya que me lo voy a mirar con tiempo para poder entenderlo bien, lo estoy intentanto hacer con un iframe oculto como dijo GatorV, ya que se trata de aprender y estoy intentando crearlo de cero, pero estoy estancado, no se si estoy haciendo bien los pasos, lo que hice fue crear una funcion js donde me crea el iframe oculto, pero despues no se como subir el archivo al servidor, muestro lo poco que tengo por si me podeis dar alguna instruccion, saludos.

Código HTML:

<html>
    <head>
        <script type="text/javascript" language="javascript">
            function crearFrame(  ) {
              var frame = document.createElement("iframe");
              frame.id = "nombre_iframe";
              frame.src = "datos.php";
              var comprobar_frame = document.getElementById("nombre_frame");
                   if (comprobar_frame==null) {
                      document.body.appendChild(frame);
                   }
            }
    
    </script>
 
    </head>
    <body>
<form name="form" action="" method="post" enctype="multipart/form-data">
    nombre:
    <input type="text" name="nombre" id="nombre" /><br/>
    imagen:
    <input type="file" name="imagen" id="imagen" onchange="javascript:crearFrame();"><br>
    <div id="mostrar_imagen"></div>
</form>
    </body>
</html>
 

cuando hago el onchange que llama a la funcion js, donde creo el iframe que despues llama a datos.php,
intento hacer la subida normal de la imagen, pero me dice que la defina osea el nombre del archivo, como si no existiera o no le llegara los datos del archivo, no se si me explico bien, pero necesito alguna ayuda para poder avanzar, saludos.

[GatorV]

Ve el primer link que te deje, tienes que apuntar el target del form al iframe que creaste para que se envie el archivo completo.

Saludos.

[caricatos]

Hola:

Para qué quieres crear un iframe dinámicamente, si puedes tenerlo creado y ocultado con estilos desde el principio... además, el código de mi artículo también se hace con un iframe... no está oculto porque es donde se muestran las imágenes...

Saludos

[roboty]

Hola GatorV, añadi esta linea de codigo al iframe que creo con javascript:

Código Javascript:

frame.setAttribute("name", "nombre_iframe");
 

y despues al formulario le añadi target, algo asin:

Código HTML:

<form name="form" action="" method="post" enctype="multipart/form-data" target="nombre_iframe">
 

pero no me funciona me da el mismo error, no se que hice mal, un saludo.

[roboty]

Para qué quieres crear un iframe dinámicamente, si puedes tenerlo creado y ocultado con estilos desde el principio... además, el código de mi artículo también se hace con un iframe... no está oculto porque es donde se muestran las imágenes...

Hola caricatos, mi idea era crearlo oculto porque no quiero que se vea para que aparezca junto a la imagen, me estoy mirando tu codigo a ratos para depurarlo ya que me esta costando entenderlo porque soy novato, pero cuando lo tenga depurado y no entienda algo te lo preguntare, si quieres claro, ademas se que tu codigo lo soportan bastantes navegadores que es esto lo que me interesa, pero para aprender quiero hacer algo sencillo, algo como un simple iframe que me muestre la imagen redimensionada sin validaciones ni nada, ya que trabajo en local, saludos.

[GatorV]

¿Cual es el error que te marca?

Te faltaría si estas usando el código que indicas más arriba, hacer el submit del formulario para que se envie al iframe.

Saludos.

[caricatos]

Iniciado por roboty

Hola caricatos...
...se que tu codigo lo soportan bastantes navegadores que es esto lo que me interesa, pero para aprender quiero hacer algo sencillo, algo como un simple iframe que me muestre la imagen redimensionada sin validaciones ni nada, ya que trabajo en local, saludos.

Pues más fácil lo pones... ¿Te parece que lo hagamos "paso a paso..."?

En mi página también reproduje el artículo: Checkeo de imágenes (antes de subirlas)... te paso el enlace porque hay más comentarios que tal vez te interesen, pero también hay un enlace para bajar los ficheros (código fuente): http://www.caricatos.net/articulos/check_form.zip

Si te interesa el "paso a paso", empieza mostrando tus progresos.

Saludos

[roboty]

¿Cual es el error que te marca?

Te faltaría si estas usando el código que indicas más arriba, hacer el submit del formulario para que se envie al iframe.

GatoRV el error en php es este:
Notice: Undefined index: imagen in C:\wamp\www\pruebas\datos.php on line 2
y en la consola web es este:

[02:11:20.798] document.getElementById("mostrar_imagen") is null
yo lo que pretendia era hacer un onchange en el campo del archivo para que al selecionar la imagen me muestre el iframe con la imagen, el el codigo datos.php, simplemente puse algo muy simple para ver si funcionaba, algo como esto:

Código PHP:

<?php
$nombre_imagen=$_FILES['imagen']['name'];
if (move_uploaded_file($_FILES['imagen']['tmp_name'],'/img_pruebas/'.$_FILES["imagen"]["name"])) {
    $imagen="/img_pruebas/".$_FILES['imagen']['name'];
    }else{
    echo "error en la subida de la imagen";
}
 
?>
<script type="text/javascript" language="javascript">
    document.getElementById('mostrar_imagen').innerHTML="<img src='/img_pruebas/<?php echo $nombre_imagen; ?>'/>";
</script>
 

En fin no se si el codigo php lo hice mal o es que el iframe no me pasa los datos del formulario, un saludo GatorV.

caricatos:

Si te interesa el "paso a paso", empieza mostrando tus progresos.

Caricatos claro que me interesa paso a paso como no me va a interesar si se trata de aprender y seria todo un privilegio tener a un maestro e incluso al creador del codigo que quiero aprender hacer, pero tampoco quiero agobiar con problemas cada dos por tres, este fin de semana me analizare tu codigo para poder entenderlo, y si quieres las dudas las posteare aqui, un saludo Caricatos.

[caricatos]

Hola:

Por lo que veo, tu código necesita unas pocas modificaciones para que pueda ser útil, y evidentemente debe ser el contenido del iframe.

Como ejemplo, pondré solo las líneas necesarias para la página principal:

Código:

<html>
<head>
<title>
Respuesta: como previsualizar imagenes de un formulario.... (iframe)
</title>
</head>
<body>
<form method="post" enctype="mutipart/form-data" target="nombre_iframe" action="iframe_imagen.php" >
<input type="file" onchnge="this.form.submit()" />
</form>
<iframe name="nombre_iframe" style="display: none" ></iframe>
<div id="mostrar_imagen" ></div>
</body>
</html>

Por cierto, no puedes usar un solo documento, así que el action no puede estar vacío, sino indicar el fichero que recibirá el file...

Y ahora en base a tu código (suponiendo que esté bien):

Código:

<html>
<head>
<title>Recibiendo file
</title
<?php
$nombre_imagen=$_FILES['imagen']['name'];
if (move_uploaded_file($_FILES['imagen']['tmp_name'],'/img_pruebas/'.$_FILES["imagen"]["name"])) {
    $imagen="/img_pruebas/".$_FILES['imagen']['name'];
    }else{
    $error = "error en la subida de la imagen";
}

if (isset($imagen)) echo <<< no_error

<script type="text/javascript" language="javascript">
window.onload = function() {
parent.document.getElementById('mostrar_imagen').innerHTML="<img src='/img_pruebas/<?php echo $nombre_imagen; ?>'/>";
}
</script>

no_error;
else echo <<< mensaje


<script type="text/javascript" language="javascript">
window.onload = function() {
alert("$error");
}
</script>

mensaje;
?>
</head>
<body></body>
</html>

Como podrás ver, no parece muy difícil.

Saludos

[roboty]

Hola caricatos, bueno en principio gracias por reformar el codigo, ahora se entiende perfectamente, aunque GatorV tenia razon me faltaba el submit, bueno volviendo a tu codigo que lo estoy analizando pero me esta costando mucho entenderlo, ya que soy muy novato y hay algunas cosas que no entiendo como por ejemplo la subida del archivo, si me pudieras explicar eso un saludo.

[caricatos]

Hola:

Sencillísimo:

Código:

<body>
<form method="post" enctype="mutipart/form-data" target="nombre_iframe" action="iframe_imagen.php" >
<input type="file" onchnge="this.form.submit()" />
</form>
<iframe name="nombre_iframe" style="display: none" ></iframe>
<div id="mostrar_imagen" ></div>
</body>

onchange="this.form.submit()"... luego mira el destino del action...

Luego, para previsualizar, fíjate en la parte del código que acepta la imagen...

Saludos

[roboty]

caricatos no me referia a ese codigo, ese codigo ya me quedo claro aunque me gustaria saber como puedo hacer para tener dos campos de archivos, bueno yo me referia al codigo que me paso IsaBelM donde utilizas variables de session, un saludo.

[cheterporras2]

Hola:

Ya sé que este tema es de hace 1 mes y pico, pero lo he estado leyendo y he descargado los códigos de Caricatos. El código me va perfectamente, pero quisiera reducir la imagen mostrada en un iframe fijo, en concreto de 100x100 (más o menos). He leido vuestras respuestas, pero hay cosas que no entiendo bien. ¿Me podríais poner un ejemplo respecto al código que subió caricatos de imagecopyresampled o imagecopyresized que tenga relación con lo que él comenta de guardar la imagen en variables de sesión?. No entiendo muy bien esta función, y hasta ahora sólo lo he visto respecto a variables. Muchas gracias

[caricatos]

Hola:

Si ya sabes guardar en una variable de sesión una imagen, esa misma imagen puedes manipularla con las librerías GD de php, pero ese tema ya debes consultarlo en otro foro.

Como resúmen, si la variable de sesión es $_SESSION["cont"]; debes crear un objeto imagen php con imagecreatefromstring($_SESSION["cont"]). Luego se redimensiona, y para volverla a poner en la variable de sesión podrías capturar la salida que produce funciones del tipo imageXXX... por ejemplo:

ob_start();
imagepng($imagen);
$_SESSION["cont"] = ob_get_clean();

Pero sin dudas en el otro foro te ayudarán mejor.

Saludos

[cheterporras2]

Gracias por tu información!!! lo miraré a ver si lo encuentro.