Como subir una imagen y obtener un preview

Cuando desarrollamos interfaces web para carga de imagenes suele ser conveniente mostrarle una previsualizacion de las mismas de tal forma que el usuario pueda validar si es realmente la imagen que desea.

Esto suele hacer de dos formas:

  • Mostrando el nombre del archivo seleccionado. 
  • Subiendo el archivo por ajax directamente al servidor y mostrando su previsualizacion.

La primera opcion, es la que viene por defecto en los navegadores. Usas un <input type="file" > y el sistema de forma automatica te muestra el nombre del archivo seleccionado.

La segunda opcion tiene un mejor impacto visual para el usuario, con el inconveniente que se debe subir el archivo al servidor, ocupar espacio en disco ( o pagar por el en caso de usar el servicio de Amazon S3 ). Sin embargo, existe una tercera alternativa que utilizar las APIs de HTML5 en este caso FileReader.

En este caso, conectamos el evento onchange del input[File], el cual nos avisara cuando se haya seleccionado un archivo, y leemos el archivo seleccionado para mostrarlo en un IMG, tal como mostramos en el siguiente codigo:

function showThumbnail(inp){
    var reader = new FileReader();

    reader.onload = function(e){

      $("img.preview").attr("src",e.target.result);
    }

    reader.readAsDataURL(inp.files[0]);

}

Esta funcion cargara la imagen no desde una URL sino desde nuestro sistema de archivos local usando el esquema DATA URI



Contactanos