图片预览兼容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