浏览器厂商不同，实现某种特定功能需要进行兼容处理，如图片预览，主流浏览器支持html5
FileReader，但是IE就****
1.FileReader
目前为止，firefox3.6+、 chrome6+、 Safari5.2+、 Opera11+、及IE10浏览器支持FileReader对象。
用法：
html
<input type="file" id="myfile">
<img src="" id="img" alt="">
js
<script>
ipt.onchange=function(){
var f=new FileReader();//获取FileReader实例对象
f.readAsDataURL(myfile.files[0]);//读取图片base64数据
f.onload=function(){//读取完毕将结果赋值对象img src
img.src=this.result;
}
}
</script>
IE处理方式
比较欣慰的是IE中file表单可以获取选中图片的绝对路径，不要急，有绝对路径了，确不能直接赋值给img，因为除了IE6之外，由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现：
非IE6
myfile.select();
myfile.blur();
var reallocalpath = document.selection.createRange().text;
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + reallocalpath + "")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
IE6
myfile.select();
myfile.blur();
var reallocalpath = document.selection.createRange().text;
img.src=reallocalpath;
兼容处理完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" id="myfile">
<img src="" id="img" alt="">
</body>
<script>
myfile.onchange=function(){
if(window.FileReader){
var f=new FileReader();
f.readAsDataURL(myfile.files[0]);
f.onload=function(){
img.src=this.result;
}
}else{
var isIE = navigator.userAgent.match(/MSIE/)!= null,
isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
if(isIE) {
myfile.select();
myfile.blur();
var reallocalpath = document.selection.createRange().text;
// IE6浏览器设置img的src为本地路径可以直接显示图片
if (isIE6) {
img.src = reallocalpath;
}else {
// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src="" + reallocalpath + "")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}
}
}
</script>
</html>
加油！
网友评论