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

来源：互联网发布：电脑在线看电视软件编辑：程序博客网时间：2024/05/16 17:42

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 对象。

0 0