Ver Mensaje Individual
  #6 (permalink)  
Antiguo 13/04/2012, 11:17
Avatar de Panino5001
Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 1 mes
Puntos: 834
Respuesta: mostrar thumbnail al cargar imagen desde pc en input=type

Aquí hay otra opción que posteamos en su momento en este foro:
Hay que testearla en servidor web para que funcione en algunos navegadores. En explorer, que no soporta esta api en la versión que uso, degrada elegantemente.
Código PHP:
<!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 type="text/javascript">
function 
redimensionar(im,maxWidth,maxHeight){
    var 
i=new Image();
    
i.onload=function(){
        var 
w=this.width,
        
h=this.height,
        
scale=Math.min(maxWidth/w,maxHeight/h),
        
canvas=document.createElement('canvas'),
        
ctx=canvas.getContext('2d');
        
canvas.width=w*scale;
        
canvas.height=h*scale;
        
ctx.drawImage(i,0,0,w*scale,h*scale);
        $(
'prev').innerHTML='<img src="'+canvas.toDataURL()+'">';
        
    }
    
i.src=im;
}
function 
previsualizar(e){
    if (!!
window.FileReader){
        var 
input=e.target,fr=new FileReader(),
        
tipos=/^image/jpg|image/jpeg|image/png|image/gif$/i;
        if(
input.files.length===0)return;
        if(!
tipos.test(input.files[0].type)){alert("El formato del archivo seleccionado es incorrecto",1);return;}
        
fr.onload=function(evt){
            var 
im=evt.target.result;
            if (
document.createElement("canvas").getContext)
                
redimensionar(im,149,149);
            else{
                $(
'namefoto').innerHTML=(e.target || e.srcElement).value;
            }
        }
        
fr.readAsDataURL(input.files[0]);
    }else{
        $(
'namefoto').innerHTML=(e.target || e.srcElement).value;
    }
}
function $(
x){return document.getElementById(x);}
function 
init(){
    $(
'pp').onchange=previsualizar;
}
onload=init;
</script>

</head>

<body>
<form>
<input id="pp" name="pp" type="file" />
<div id="namefoto"></div>
<div id="prev"></div>
</form>
</body>
</html>