在深圳做项目的时候，需要一个用户上传头像预览的功能！是在网上找了好多，都不太满意。要么是flash的，要么是ajax上传后返回图片路径的，要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能，还被我给翻了出来，在这里做个记录，方便自己以后用，也方便其他需要的朋友！
代码很简单，如下：
<!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>by：dragondean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setimagepreview(avalue) {
var docobj=document.getelementbyid("doc");
var imgobjpreview=document.getelementbyid("preview");
if(docobj.files &&docobj.files[0])
{
//火狐下，直接设img属性
imgobjpreview.style.display = 'block';
imgobjpreview.style.width = '150px';
imgobjpreview.style.height = '180px';
//imgobjpreview.src = docobj.files[0].getasdataurl();
//火狐7以上版本不能用上面的getasdataurl()方式获取，需要一下方式
imgobjpreview.src = window.url.createobjecturl(docobj.files[0]);
}
else
{
//ie下，使用滤镜
docobj.select();
var imgsrc = document.selection.createrange().text;
var localimagid = document.getelementbyid("localimag");
//必须设置初始大小
localimagid.style.width = "150px";
localimagid.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localimagid.style.filter="progid:dximagetransform.microsoft.alphaimageloader(sizingmethod=scale)";
localimagid.filters.item("dximagetransform.microsoft.alphaimageloader").src = imgsrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgobjpreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localimag"><img id="preview" src="http://blog.chuangling.net/public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setimagepreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>
测试在ie8，ff12.0和谷歌chrome 28.0.1500.72都能用!
更多上传图片预览js脚本 input file图片预览的实现示例。