viernes, 4 de abril de 2014

Tip Agregar Vista Preliminar en Subida de Imagen con HTML5




Supongamos que hiciste tu formulario de subida de imagenes algo similar al que te mostré en Tutorial PHP : Subir imagen y guardar direccion de base de datos, pero quieres hacerlo algo mas vistoso, o simplemente mejorar su utilidad, haciendo un preview de la imagen a subir antes que vaya al servidor.



Vista Preliminar en Subida de Imagen con HTML5


Para esto vamos a utilizar el API Files de HTML5, con esta API podremos leer la imagen que queremos subir, y obtener una vista preliminar de la misma antes de enviarla a nuestro servidor.

Como requisito es necesario tener JQuery, pueden seguir este tutorial, Tutorial JQuery desde 0

Veamos el codigo, modificaremos nuestro HTML agregandole un elemento imagen <img />, que sera donde visualizaremos nuestra vista preliminar de la imagen ha ser subida.

<form method="post" enctype="multipart/form-data" action="subir_imagen.php">
   Codigo: <input id="txt_codigo" type="text" name="codigo"><br>
   Descripcion: <input id="txt_descripcion" type="text" name="descripcion"><br>
   <input id="file_url" type="file" name="foto"><br>
   <input type="submit" value="Guardar">
   <br>
   <img id="img_destino" src="#" alt="Tu imagen">
  </form>


Veremos algo asi



Ahora implementemos nuestro codigo Javascript.

function mostrarImagen(input) {
 if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function (e) {
   $('#img_destino').attr('src', e.target.result);
  }
  reader.readAsDataURL(input.files[0]);
 }
}

$("#file_url").change(function(){
 mostrarImagen(this);
});

Lo que hace el codigo es lo siguiente, en la linea $("#file_url"), capturamos el evento change, que es disparado cada vez que seleccionamos una imagen, este evento llamara a la función mostrarImagen().

En la función mostrarImagen(), tomamos como parametro nuesro elemento input tipo file, y validamos que sea exactamente un elemento tipo archivo, luego, llamamos al API File, e instanciamos un nuevo objeto FileReader.

En el evento de carga de FileReader, reader.onload, definimos que al momento de ejecutarse el evento, nuestro elemento imagen, tome como ruta de la imagen, la misma que se estableció en nuestro elemento input, esto lo hace utilizando el parámetro e, el cual representa nuestro evento, utilizamos sus metodos target.result para obtener la url del elemento input.

Por ultimo, le decimos al objeto FileReader que lea la direccion de nuestro input, reader.readAsDataURL(input.files[0])

Ejemplo de Vista Preliminar en Subida de Imagen con HTML5


He aqui el ejemplo.

*No funciona en todos los navegadores solo aquellos que soportan el API File de HTML5

Codigo:

Descripcion:






Tu imagen



12 comentarios:

  1. que tal, me sirvio mucho tu codigo, pero hora tengo un problema, yo genero dinamicamente con un boton otro input para mostrar la imagen, el problema es q no me lo muestra, como podria hacerle?

    ResponderEliminar
  2. Muy bueno el tutorial, ahora siguiendo la misma base de un codigo y una descripcion en forma individual como hacer para multiples imagenes

    ResponderEliminar
    Respuestas
    1. Lograste hacerlo para múltiples imágenes?

      Eliminar
  3. Gracias por compartir, exelente informacion

    ResponderEliminar
  4. No sirve tu script,, postea copmpleto, el demo tuyo funciona... pero el código posteado es erroneo

    ResponderEliminar
  5. excelente codigo, 2 dias buscandolo.
    Para implementarlo en la pagina web de los chocoanos red social
    HTTP://SOMOSCHOCO.COM

    ResponderEliminar
  6. Muy bueno tu aporte, me ayudaste bastante.
    Gracias

    ResponderEliminar
  7. algo falta en el codigo no? a mi no me funciona

    ResponderEliminar
  8. Muy bueno paps +10 :v

    ResponderEliminar
  9. tanto que busqe y no habia encontrado un sitio donde me explicaran como lo hacian, me sirvio muchas gracias

    ResponderEliminar
  10. Hola, tu código me ha funcionado de maravilla, pero quisiera saber si es posible hacerlo funcional para varios campos, ya que cuando lo pongo sirve para el primer input que encuentra, pero para el segundo campo donde hay otro input ya no jala la imagen, de antemano muchas gracias!

    ResponderEliminar

 
Powered by Blogger