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

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

——跨域——

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


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

你可能感兴趣的:(javascript)