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>