찾다

 >  Q&A  >  본문

javascript - 求解读:一段有关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 p = document.getElementById(_self.Setting.pShow);
                    this.select();
                    top.parent.document.body.focus();
                    var src = document.selection.createRange().text;
                    document.selection.empty();
                    document.getElementById(_self.Setting.ImgShow).style.display = "none";
                    p.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    p.style.width = _self.Setting.Width + "px";
                    p.style.height = _self.Setting.Height + "px";
                    p.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                }
            } else {
                document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
            }
            _self.Setting.callback();
        }
    }
}
ringa_leeringa_lee2775일 전447

모든 응답(2)나는 대답할 것이다

  • PHPz

    PHPz2017-04-11 12:29:13

    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标签

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

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

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

    회신하다
    0
  • 迷茫

    迷茫2017-04-11 12:29:13

    请问楼主最后解决了吗?我这一行
    p.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
    ie报错,提示无效指针;

    회신하다
    0
  • 취소회신하다