« glow de imágenes con css | Main | va de nuevo. »

September 16, 2004, 05:14 PM

Preview de Imágenes antes de subirlas.

Cuando se trabaja con forms en los cuales hay que subir imágenes, siempre es bueno tener un preview y así estar seguros de que realmente vamos a subir la imagen que queremos.

Este preview se puede hacer fácilmente utilizando para esto javascript.

Cómo?

Las imágenes tienen una propiedad llamada src (de source u origen), el truco aquí es detectar cuando el input del tipo file ( archivo ) cambie, tendrá el path a la imagen que queremos subir e invocará a la función javascript que cambia la propiedad src de la imagen, haciendo así la vista previa.

La forma más sencilla es identificar a las partes que participan, así podremos acceder, cambiar su valores más fácilmente.

Actores

En este caso, ocuparemos 4 actores.

1.el formulario

2.la imagen original

3.el input

4.el javascript.

El form

Si intentamos subir la imagen al servidor ( donde luego se procesara para ser gravada en éste cuento aparte), deberemos tener unform de tipo "multipart/form-data", aparte este deberá tener también un nombre o idenficador para ayudarnos a encontrar la ruta de la imagen que queremos subir ( el clásico form1 en este caso)

La imagen

La imagen incial puede ser una que esté en el servidor, un spacer, o cualquier otra imagen; esta tiene un idenficador con el cual le podremos cambiar la propiedad src, para el ejemplo se llamará "picture". ( no vaya a ser que le pongan zapato, y luego no sepan a qué se refiere )

El input

El input es del tipo file ( archivo ) y tiene por nombre imageField, aparte tiene el evento onChange donde llama al javascript.
<input name="imageField" type="file" onChange="refreshImg()">

El javascript

El señor refreshImg (osea que ese es el nombre de la función pero se quiere hacer el importante),es el encargado de dos cosas
1.buscar el valor del campo input (document.form1.imageField.value), y asignárselo a la propiedad src de la imagen con id "picture" (document.form1.picture.src).

La sopa

El ejemplo completo sería algo como este ( guardar como .html, como txt no funciona :P):
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Img Upload w/Preview</title>
<style type="text/css">
<!--
input {
   margin-top:10px;
   display: block;
   text-align:center;
}
form{
 text-align:center;
   width:400px;
   margin-left:auto;
   margin-right:auto;
}
-->
</style>
<script language="javascript">
  function refreshImg(){
     document.form1.picture.src = 'file:///'+ document.form1.imageField.value;
   }
</script>
</head>
<body>
  <form name="form1" id="form1" action="" method="post" 
enctype="multipart/form-data" >
    <img src="../fotos/imagen.jpg" id="picture" alt="vista 
previa"/>
    <input name="imageField" type="file" onChange="refreshImg()">
  </form>	
</body>
</html>

Compatibilidad

Esto se probó usando firefox e internet bugsplorer, lamentablemente el señor netscape amaneció de malas y no quizo cooperar

Posted by kada

Comentarios

1Fernando , (September 16, 2004 07:08 PM):

Jajajaja, que curioso.

Buena idea ;)

2Freddie® , (September 16, 2004 10:52 PM):

Si, un tanto raro; pero vaya que puede ser util :D

3cvander , (September 16, 2004 11:29 PM):

Muy bonito y útil. Gracias por compartirlo.

4dago135 , (September 17, 2004 11:30 AM):

=) bien hecho kada! muy util la vdd!

saludos

5BeSLNeT , (September 19, 2004 01:26 AM):

Hola kada, oye está bueno el ejemplo pero tiene un error al menos a mí me marco el error en una linea de la función te mando el original y el corregido por mí, bueno no es gran cosa, pero por si acaso sirve mi humilde observación

Original:

document.picture.src = 'file:///'+ document.form1.imageField.value;

Corregido:

document.form1.picture.src = 'file:///'+ document.form1.imageField.value;

---------------

Linea 24



Saludos ;)

BeSLNeT

6kadazuro , (September 19, 2004 08:49 AM):

que raro, seguro lo cambié cuando lo estaba probanco con netscape, bueno de todas maneras, gracias por la correción BeSLNeT.=)

7dQ , (September 29, 2004 02:15 PM):

Hola maestro muy curioso esto que comentas !!! me fue de gran utilidad ya que lo implemente a un demo que estoy haciendo y en realidad es muy util.

mira aca el demo ya implementado !

http://www.darioquiroga.com.ar/clients/interPatagonia/app/index.php

ingresa en agregar foto !

8xleon , (October 20, 2004 04:10 PM):

Hola Kada, nunca he comentado aqui pero te he leido bastante, y tu libro (con granatta) me ayudó mucho. Se te ocurre cómo hacer esto mismo en flash ? Cómo hacer que flash muestre una foto del disco duro del cliente...