JavaScript实现图片上传前预览（兼容所有浏览器）
功能描述
通过 JavaScript 实现图片的本地预览（无需上传至服务器），兼容所有浏览器（IE6&IE6+、Chrome、Firefox）。
效果示例
实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
实现代码
<!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" />
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview" style="width: 129px; height: 165px; padding-bottom: 10px;">
<img id="imageHeader" src="" class="personal_photos" />
</div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
var imgPath=evt.target.result;
//允许上传的图片格式
var regext = /\.jpg$|\.gif$|\.jpeg$|\.png$|\.bmp$/gi;
if(!regext.test(imgPath)){
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传！");
file.select();
document.selection.clear();
}else{
document.getElementById("imageHeader").src=imgPath;}
}
reader.readAsDataURL(file.files[0]);
}
else
{
var imgPath=file.value;
prevDiv.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + imgPath + "\")";
}
}
</script>
</body>
</html>
引自：http://hi.baidu.com/chinatjnet/item/3d47bef73b782212ff358272
浙公网安备 33010602011771号