Cómo mostrar una foto de la imagen a enviar en un formulario

macrodis · #1 (**permalink**) 11/05/2009, 12:07

Saludos a todo/as.

Me encuentro con el siguiente problema, que no sé cómo puedo solucionar.

Para que os hagáis una idea, lo que necesito es mostrar la foto que envío en un formulario, a través del botón EXAMINAR. Se trata de un envío tipo FILE, que enviará el archivo por correo mediante un CGI. La cuestión es que el cliente desea que se pueda mostrar una imágen pequeña de esa foto para que el usuario sepa en todo momento qué foto está enviando.

Un ejemplo sería la página de HABITAMOS. Al escoger las fotos mediante EXAMINAR aparece al lado la imágen en miniaturade esa foto, antes de ser enviada. Pues eso mismo es lo que necesito hacer.

¿Alguien podría decirme si existe alguna forma sencilla de realizar este paso sin tener que crear una alicación que requiera BBDD? Llevo tiempo mirando en la red y lo más cercano que he podido observar es guardar las imágenes 1º en algun lugar del servidor, vía FTP, o en una tabla de BD, para posteriormente volver a llamarla y mostrarla. No me sirve. Necesitaría algo más sencillo, si es que es posible.

Espero haberme explicado bien.

Saludos

Ronruby · #2 (**permalink**) 11/05/2009, 12:34

Algo mas sencillo de ahi, no existe. El servidor necesita poder tener acceso a la imagen para mostrarla.

Lo mas parecido a lo que buscas es esto:
http://www.caricatos.net/articulos/prever.php
Pero la imagen aun tiene que ser enviada. Aunque esto puede ser asincronamente usando AJAX.

farra · #3 (**permalink**) 11/05/2009, 13:17

yo lo hacia asi:

Código HTML:

<!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>Documento sin t&iacute;tulo</title>
<script>
function muestrafoto(Filename) { 
var Form = document.form1; 
var File1 = form1.file.value; 
document.getElementById('foto').src='file://'+File1; 
}
</script>
</head>

<body>
<div align="center">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
   <img name="foto" src="sinfoto.jpg" width="32" height="32"  id="foto" /><br />  
   <br /> <label> 
  <input type="file" name="file" id="file" onchange="muestrafoto();" />
  <a href="javascript:muestrafoto();">mostrar</a><br />
  </label>
</form>
</div>
</body>
</html>

pero ahora con los nuevos navegadores al parecer ya no funciona mas...