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.
[code][/code]
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):
[code]
Img Upload w/Preview
[/code]
Compatibilidad
Esto se probó usando firefox e internet bugsplorer, lamentablemente el señor netscape amaneció de malas y no quizo cooperar
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
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 !
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...
Jajajaja, que curioso.
Buena idea ;)
Si, un tanto raro; pero vaya que puede ser util :D
Muy bonito y útil. Gracias por compartirlo.
=) bien hecho kada! muy util la vdd!
saludos
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
que raro, seguro lo cambié cuando lo estaba probanco con netscape, bueno de todas maneras, gracias por la correción BeSLNeT.=)
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 !
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...