旁白：
一般来说如果要实现在上传前预览图片的话，用纯服务器端的语言必定是办不到的，需要先传到服务器上，哪怕是只是服务器上的临时文件，这也是个很麻烦的事情，不过可以用javascript来做这件事。下面的javascript就可以是现在服务器上预览本地图片。（原作者说代码仅支持IE和 firefox，经本人试验验证ie，火狐，谷歌均ok，谷歌用html时候是不太好用，不过jsp没问题的）。浏览器一向我行我素，非要自己再弄套标准，着实让编程者脑袋疼。期待天下统一吧。IE是用了滤镜。
来人吖，代码伺候吖：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>图片上传本地预览</title><style type="text/css">#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</style><script type="text/javascript">function previewImage(file){var MAXWIDTH = 100;var MAXHEIGHT = 100;var div = document.getElementById('preview');if (file.files && file.files[0]){div.innerHTML = '<img id=imghead>';var img = document.getElementById('imghead');img.onload = function(){var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);img.width = rect.width;img.height = rect.height;img.style.marginLeft = rect.left+'px';img.style.marginTop = rect.top+'px';}var reader = new FileReader();reader.onload = function(evt){img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);}else{var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';file.select();var src = document.selection.createRange().text;div.innerHTML = '<img id=imghead>';var img = document.getElementById('imghead');img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";}}function clacImgZoomParam( maxWidth, maxHeight, width, height ){var param = {top:0, left:0, width:width, height:height};if( width>maxWidth || height>maxHeight ){rateWidth = width / maxWidth;rateHeight = height / maxHeight;if( rateWidth > rateHeight ){param.width = maxWidth;param.height = Math.round(height / rateWidth);}else{param.width = Math.round(width / rateHeight);param.height = maxHeight;}}param.left = Math.round((maxWidth - param.width) / 2);param.top = Math.round((maxHeight - param.height) / 2);return param;}</script></head><body><div id="preview"><img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'></div><br/><input type="file" onchange="previewImage(this)" /></body></html>
