图片预览兼容IE8处理

图片预览兼容IE处理

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

html：

<div id="preview"></div>
<input type="file" id="file_upl" onchange="imgPreview(this)">

js：

function imgPreview(file) {
    var prevDiv = document.getElementById('preview');

    if (file.files && file.files[0])
    {
        var reader = new FileReader();
        reader.onload = function(evt){
            prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
        }
        reader.readAsDataURL(file.files[0]);
    } else
    {
var file_upl = document.getElementById('file_upl');
        file_upl.select();
        var realpath = document.selection.createRange().text;
        prevDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + realpath + "\")";
    }
}

在用document.selection前，我们需要先创建选中区。如鼠标选中文本框，即是一个选中区。也可以通过js提供的select()方法创建一个选中区。创建了选中区后，我们就可以通过document.selection获取该选中区。如果要对选中区执行操作，则需要先调用createRange()方法。

//获取上传文件控件的值；
file.select();
var realpath = document.selection.createRange().text;

现有的获取IE低版本上传文件的value值一般都是这种方式，在IE中原本可以直接通过input的value值来获取上传图片的路径，但是在实际中很少看到使用。具体的大家可以去查查资料。
非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现。

pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + realpath + "\")";

转载于:https://www.cnblogs.com/miny-simp/p/8274919.html