首页 > 求解读:一段有关IE浏览器兼容性问题的代码

求解读:一段有关IE浏览器兼容性问题的代码

最近在网上看到一个上传图片预显示的插件,比较好奇就差看了一下代码是怎么写的,但是有一部分看不明白(图中红框部分),只知道和IE兼容性问题相关,但是因为对这方面一些了解比较少所以想请各位大神帮忙解读一下

另附代码:

_self.Bind = function() {
    document.getElementById(_self.Setting.UpBtn).onchange = function() {
        if (this.value) {
            if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                alert(_self.Setting.ErrMsg);
                this.value = "";
                return false;
            }
            if (navigator.userAgent.indexOf("MSIE") > -1) {
                try {
                    document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
                } catch (e) {
                    var div = document.getElementById(_self.Setting.DivShow);
                    this.select();
                    top.parent.document.body.focus();
                    var src = document.selection.createRange().text;
                    document.selection.empty();
                    document.getElementById(_self.Setting.ImgShow).style.display = "none";
                    div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    div.style.width = _self.Setting.Width + "px";
                    div.style.height = _self.Setting.Height + "px";
                    div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                }
            } else {
                document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
            }
            _self.Setting.callback();
        }
    }
}

document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);

上面这段代码中的getObjectURL我查不到js有这个api
但是有一个功能相似的api : URL.createObjectURL()

所以getObjectURL方法的声明和定义应该是这样的:

Object.getObjectURL = function(Blob){
    return URL.createObjectURL(Blob)
}

又由于URL.createObjectURL()这个API在IE下只支持IE10以上,所以需要做兼容处理,也就是catch error 的部分,这也是你提出的问题所在

document.selection.createRange().text
这个方法是用来获取当前文档输入框(input或者textarea)被选中的文字
详见链接

this.select();//input[type='file'] 在选择图片后会在输入框有图片的路径地址,这个方法选中这些路径的文本
top.parent.document.body.focus();//保持在最上层文档
var src = document.selection.createRange().text;//获取图片路径地址
document.selection.empty();//取消选中
document.getElementById(_self.Setting.ImgShow).style.display = "none";//隐藏原来要显示图片的img 标签

这一段是获取图片的路径并隐藏Img标签

div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
div.style.width = _self.Setting.Width + "px";
div.style.height = _self.Setting.Height + "px"; 
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;     

这一段是利用css的滤镜属性fliter详见链接

现学现卖,满意请给个赞~

【热门文章】
【热门文章】