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



6 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
  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

 
Powered by Blogger