al subir imagen la muestre en formulario

sheilac · #1 (**permalink**) 14/03/2008, 15:25

Holis
Tengo hecho un formulario para subir imagenes al servidor y esta andando barbaro.
Ahora se me pide que tengo que tener una imagen al lado del boton examinar y que cuando se clickeo en el boton examinar y se cargo la imagen me la debe mostrar en lugar de esa que tenia una miniatura de la imagen que se cargo.
obvio que aun no la tengo en el servidor.
cuando aparece el path con el camino me debe mostrar la imagen.
Alguien tiene una idea como lo puedo hacer???
desde ya muchas gracias

#2 (**permalink**) 14/03/2008, 15:52

Prueba así, aunque es más javascript que PHP:

Código HTML:

<img src="imagen_vacia.gif" id="vistaprevia" />
<input type="file" onchange="document.getElementById('vistaprevia').src = this.value" />

CReo que así debería ir bien.

Un saludo,

caricatos · #3 (**permalink**) 14/03/2008, 16:04

Hola:

Solo puedes mostrar las imágenes después de subirlas... te paso un artículo: Revisar las imágenes antes de subirlas en el caso se guarda el contenido binario en una variable de sesión, y para evitar la caché del navegador se le añade a la url un valor "fantasma"

Saludos

sheilac · #4 (**permalink**) 14/03/2008, 16:49

ok
barbaro justo lo que precisaba muchas gracias caricatos
lo veo, ya que lo note un poco complicado para mi porque hay cosas que nome quedan muy claras la parte de gestion desde el servidor no veo como la llama
no la veo en ningun lado del formulario y en previsor php no creo qeu valla
ojala y lo pueda entender bien porque es justo lo que necesito.
aunque tengo un formulario con seis imagenes pero imagino que llamandolo en cada boton lo pueda usar,
poniendo las funciones al principio del formulario y llamando de cada boton espero no se tranque.
igual antes lo voy a probar a ver si lo puedo hacer asi solo con una hasta que l entienda.
muchas gracias

caricatos · #5 (**permalink**) 14/03/2008, 17:16

Hola:

La verdad es que cuando lo pruebes podremos evaluar los problemas... tal vez sea un poco complejo, pero solo es debido a la dificultad de mostrar las imágenes de un pc... Se trata del envío de la imagen hacia un iframe, ya que es imprescindible el método post y enctype="multipart/form-data" y solo se consigue con un submit...

Hablanos de tus progresos.

Saludos

sheilac · #6 (**permalink**) 14/03/2008, 18:57

pues la verdad es que no hace nada pero tampoco marca error.
como no veo de poner un zip aqui copio el codigo
es tal cual el que esta en el sitio ya que andando ese veria como lo cambiaria al mio.
Me debe andar en firefox " obligatoriamente" requisitos del cliente.
el formulario lo que hice fue copiar el codigo de la pagina y lo puse en un formulario html.
luego hice el previendo.php

Cita:

<?php
session_start();
$defecto = ""house.jpg"";
$Ok = isset($_FILES["archivo"]);
$url = ($Ok) ? $_FILES["archivo"]["tmp_name"] : $defecto;
list($anchura, $altura, $tipoImagen, $atributos) = getimagesize($url);
$error = (isset($atributos)) ? 0 : 1;
$los_tipos = array("gif", "jpg", "png");
$tipo = ($Ok) ? "image/".$los_tipos[$tipoImagen - 1] : "image/gif";
$fichero = ($Ok && ($error == 0)) ? $_FILES["archivo"]["name"] : $defecto;
$tam = filesize($url);
$OkTam = isset($_POST["maxpeso"]);
$OkAncho = isset($_POST["maxancho"]);
$OkAlto = isset($_POST["maxalto"]);
$maxTam = ($OkTam) ? (int) $_POST["maxpeso"]: 100000;
$maxAncho = ($OkAncho) ? (int) $_POST["maxancho"]: 640;
$maxAlto = ($OkAlto) ? (int) $_POST["maxalto"]: 480;
$error += ($tam <= $maxTam) ? 0 : 2;
$ancho = ($error == 1) ? 0 : $anchura;
$alto = ($error == 1) ? 0 : $altura;
$error += ($ancho <= $maxAncho) ? 0 : 4;
$error += ($alto <= $maxAlto) ? 0 : 8;
$datos = ($error == 0) ? $url : $defecto;
$onload = ($Ok) ? "onload='parent.datosImagen($tam, $ancho, $alto, $error)'": '';
$datos_imagen = fread(fopen($datos, "rb"), filesize($datos));
$_SESSION["cont"] = $datos_imagen;
$_SESSION["tipo"] = ($error == 0) ? $tipo : "image/gif";
?>
<html>
<head>
<style type="text/css" >
html {
margin: 0;
height: 100%;
}
body {
height: 100%;
background-image: url(previendo.php?dato=<?=$fichero;?>);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body <?=$onload;?>>

</body>
</html>

y en el formulario previsor.php esto

Cita:

<?php
session_start();
$url = ($_SESSION["cont"] == "")
? fread(fopen("house.jpg", "rb"), filesize("house.jpg"))
: $_SESSION["cont"];
$tip = ($_SESSION["tipo"] == "")
? "image/gif"
: $_SESSION["tipo"];
header("Content-type: $tip");
echo $url;
session_destroy();
?>

mil disculpassi es mucho codigo por eso no puse el formulario.
pero no me muestra la imagenme dice error 404 not found
la imagen es del tamaño y peso adecuado de los controles que se hace
Graciassss

caricatos · #7 (**permalink**) 15/03/2008, 00:13

Hola:

En principio, fíjate que por defecto usas un jpg, y en el artículo es un gif, así que las cabeceras no coinciden... y eso de que no lee la imagen...

si el formulario es correcto, no debería ocurrir (¿has controlado el método y el enctype?)... sin el form en condiciones no va.

Si tienes un enlace para ver el funcionamiento...

Una cosa que no está bien son los nombres... parece que están invertidos.

De todos modos he subido un zip con los archivos originales: http://www.caricatos.net/articulos/check_form.zip

Saludos

sheilac · #8 (**permalink**) 15/03/2008, 08:30

muchisimas gracias
esta completamente funcional
le estoy haciendo los ajustes y les cuento.
Estoy haciendo que me suba una miniatura y no el tamaño original de la imagen.
TEngo una duda este ejemplo lo puedo aplicar a cuando son seis imagenes que tengo que subir??? en un mismo form
porque estan todas en un mismo formulario, y aqui no veo como poner si es que se puede seis iframe para relacionarlos cada uno con determinado input??
me parece le debo buscar otra vuelta en esta parte porque lo he intentado y no lo hace , bueno nunca trabaje con iframes voy a leer al respecto .
Gracias

sheilac · #9 (**permalink**) 17/03/2008, 08:39

Hola
disculpen siga preguntando sobre este tema.
Ya logre hacer este ejemplo con una imagen y que el iframe lo traiga al lado del boton examinar y me suba la minitatura.
Ahora busco en internet el tema de los iframe que no los conocia.
y por lo que leo es como otro formulario dentro del mismo formulario.
No he podido hacer que si tengo seis botones examinar en el mismo formulario uno debajo del otro poder hacer lo mismo con los otros botones porque no sabe a que iframe estoy llamando.
Lo que veo es volver a renombrar las funciones cn otro nombre para que el formulario las llame pero como que no le veo mucho sentido escribir las mismas funciones tantas veces que hacen los mismo.Seria una recarga de codigo muy tonta.
Donde estaria el reutilizar el codigo.
alguien me podria asesorar en que hago??? Intente hacer lo mismo con un <img> pero no me lo hace.
muchas gracias.

caricatos · #10 (**permalink**) 17/03/2008, 11:54

Hola:

Los iframes son ventanas y se relacionan con los formularios mediante el atributo target del mismo (el tag form)... o pones un formulario por imagen, o a cada botón le asocias un script que cambie el target... y puedes reutilizar el código simplemente así:
<input type="file" onchange="this.form.target = 'ventana1';" ... >

Saludos

sheilac · #11 (**permalink**) 17/03/2008, 20:06

Disculpa Caricatos perdoname sea tan burra pero estoy tratando de implementar lo que me dijistes y no hay caso solo funciona el primer boton.
Tengo que hacerlo no con un form por cada imagen sino a cada imagen asignarle el target como me dijistes
pero hago estoy no hay caso

Código:

<input type="file" name="archivo" id="archivo" src="previsor.php"  onchange="this.form.target = checkear(this)"  style="width:300px"><iframe  src="previsor.php" id="ver"  name="ver" align="bottom" style=" width: 50px; height: 50px;"></iframe></input> 
<br><input type="file" name="archivo2" id="archivo2" src="previsor.php"  onchange="this.form.target = ('ver2');checkear(this)"  style="width:300px"><iframe  src="previsor.php" id="ver2"  name="ver2" align="bottom" style=" width: 50px; height: 50px;"></iframe></input>

le primer boton si funciona el segundo hace todo el proceso y no trae nada.
Asi es como es el codigo del boton que me funciona bien
al lado de cada boton le pongo un iframe pero me los confunde y me cambia uno solo.
que hago mal???

y graciassss

jaronu · #12 (**permalink**) 17/03/2008, 20:21

Hola que tal,

una cosa, no se si se puede hacer, pero es una idea, porque no, ya que tienes las variables con toda la informacion pruebas a pasar todas las variables a otra pagina php que muestre el contenido de esas variables y que muestre la foto, y al final un boton de insertar o lo que sea que termine el proceso.

Un saludo.