Cargar imagen con jquery en HTML5
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;
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);
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);
}
Nota: La variable result contiene los datos de la imagen en codificación base64.
Demostración
En que parte del programa cambio la ruta para que me reciba la foto en mi web y esto se aloja en un archivo .html
ResponderBorrarHola te hago una pregunta, yo de javscript, no tengo mucha idea. Pero como hago para borrar la imagen visualizada, antes de subirla???
ResponderBorrarGracias.
Hice esto pero me recarga el form
Hasta aca me sirvio y me andubo perfecto. Muchas Gracias
lo trato de implementar con asp, pero no me funciona
ResponderBorraralguna recomendacion
excelente amigo!!, me funciono de una!!
ResponderBorrar