IE8 用滤镜实现上传预览图片,解决C:\fakepath\*.jpg问题,获取本地路径-CSDN博客

本文链接：https://blog.csdn.net/shijue98/article/details/53081252

IE8 用滤镜实现上传预览图片,解决C:\fakepath*.jpg问题,获取本地路径
IE8出于安全考虑,将本地路径替换为fakepath,不曾想却给我们这些程序员造成了这么大的问题,为了实现上传预览功能抓耳挠腮了.
开始从网上找了好多资料,放到编辑器中运行,试验了好多次都不成功;
主要报错类型有:
1、无法获取未定义或 null 引用的属性“item”;
2、拒绝访问；
就在绝望的搜索中，突然看见了一个让人耳目一新的答案，虽然不知道怎么样，但是还是要尝试一下，拽着救命稻草，果然成功了！！！
到底是什么呢？

——跨域——

没错就是跨域了,我把html文件在本地用浏览器打开(切记是IE8模式),果然成功!
以下附上一个最简单的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">  
    </head>
    <body>
        <div id="box" style="border:1px solid green;
            height:50px;width:100px"></div> 
         <p> 
           选择图片：
           <input type="file" id="fileId" size="20"
                onchange="javascript:PreviewImg(); "/> 
         </p>
 <script>
var ofile = document.getElementById("fileId");
var oBox = document.getElementById("box");
function PreviewImg(){              
    ofile.select();  
    //在file控件下获取焦点情况下 
    //document.selection.createRange() 将会拒绝访问
    ofile.blur(); 
    //获取文本内容值，在IE8中,选择文件之后,显示文件的本地的路径
    var imgSrc = document.selection.createRange().text;
    //将图片显示在预览
    oBox.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            oBox.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
} 
</script>
    </body> 
</html>

由于篇幅局限,代码格式已经不理想;

备注:

document.selection 表示当前网页中的选中内容。

方法有：

clear　清除选中的内容 
empty　取消选中 
createRange　返回 TextRange 或 ControlRange 对象 
createRangeCollection 不支持

属性有：

type　选中内容的类型 
typeDetail 不支持

document.selection.createRange()

根据当前文字选择返回 TextRange 对象，或根据控件选择返回ControlRange 对象。