js图片上传前预览功能（兼容所有浏览器）
网上找到的一份文件上传前预览的代码,转自JavaScript图片的上传前预览（兼容所有浏览器）
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<styletype="text/css">
#preview,
.img,
img{
width:200px;
height:200px;
}
#preview{
border:1pxsolid#000;
}
</style>
</head>
<body>
<divid="preview"></div>
<inputtype="file"onchange="preview(this)"/>
<scripttype="text/javascript">
functionpreview(file){
varprevDiv=document.getElementById('preview');
if(file.files&&file.files[0]){
varreader=newFileReader();
reader.onload=function(evt){
prevDiv.innerHTML='<imgsrc="'+evt.target.result+'"/>';
}
reader.readAsDataURL(file.files[0]);
}else{
prevDiv.innerHTML='<divclass="img"style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\''+file.value+'\'"></div>';
}
}
</script>
</body>
</html>
实现要点
●对于Chrome、Firefox、IE10使用FileReader来实现。
●对于IE6~9使用滤镜filter:progid:DXImageTransform.Microsoft.AlphaImageLoader来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。