Cargar imagen con jquery en HTML5
En esta ocasión les mostrare una nueva forma de cargar una imagen directamente desde javascript. Esto es posible gracias a HTML5 que incluye nuevas librerías para el manejo de archivos.
Bueno ahora miremos el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <script language="JavaScript" type="text/javascript" src="jquery.js" charset="utf-8"></script> <script type="text/javascript" language="javascript"> $(window).load(function(){ $(function() { $('#file-input').change(function(e) { addImage(e); }); function addImage(e){ var file = e.target.files[0], imageType = /image.*/; if (!file.type.match(imageType)) return; var reader = new FileReader(); reader.onload = fileOnload; reader.readAsDataURL(file); } function fileOnload(e) { var result=e.target.result; $('#imgSalida').attr("src",result); } }); }); </script> </head> <body> <input name="file-input" id="file-input" type="file" /> <br /> <img id="imgSalida" width="50%" height="50%" src="" /> </body> </html>
Explicación del código
Bueno primero necesitamos un input file para cargar el archivo y a este le asignamos al evento change un método llamado addImage() para que procese la imagen seleccionada.
$('#file-input').change(function(e) {
addImage(e);
});
El método addImage() seleccionara el archivo y aplicara un filtro para que solo se pueda seleccionar imágenes.
var file = e.target.files[0],
imageType = /image.*/;
if (!file.type.match(imageType))
return;
imageType = /image.*/;
if (!file.type.match(imageType))
return;
Después se cargará el archivo en memoria y se asignará a un método fileOnload() el procesamiento de los datos.
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
reader.onload = fileOnload;
reader.readAsDataURL(file);
Por último se guarda los datos de la imagen en una variable y se agregara los datos al atributo src del img.
function fileOnload(e) {
var result=e.target.result;
$('#imgSalida').attr("src",result);
}
var result=e.target.result;
$('#imgSalida').attr("src",result);
}
Nota: La variable result contiene los datos de la imagen en codificación base64.
Demostración
