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: