ie9下支持的图片预览和ie11,谷歌支持的图片预览

概述:在ie9下实现图片预览效果

1 HTML代码

<li class="clearFix upLoadPic" id="upLoadPic">
      <label  class="fl">上传图片:</label>
      <input id="uploadLocalPic" type="file"  class="fl" onchange="previewPic()" name= 
        "multipartfile"/>
</li>
<%--预览图片--%>
<div id="previewArea" style="384px;height: 224px;margin-top:15px;display: none" >
     <img id="browerPicture" style="100%"/>
</div>

2 js代码

function previewPic(){
        var pic = document.getElementById("browerPicture"),  
            file = document.getElementById("uploadLocalPic");
        var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
        // gif在IE浏览器暂时无法显示
        if(ext!='bmp'){
            top.artDialog.alert("图片的格式必须为bmp格式!");
            return;
        }
        var isIE = navigator.userAgent.match(/MSIE/)!= null;  //ie版本
        $("#previewArea").show();
        document.getElementById("browerPicture").src="";
        if(isIE) {   //ie9
            file.select();
            //让其他的div获取到焦点,这样就解决了document.selection.createRange().text拒绝访问的问题
            document.getElementById("previewArea").focus(); 
            var reallocalpath = document.selection.createRange().text;

            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
            pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" + reallocalpath + "")";
            pic.style.width = "384px";
            pic.style.height = "224px"
            // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
            pic.src = 'data:image/bmp;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
        }else {  //ie11,谷歌
            var reader = new FileReader();
            reader.readAsDataURL(file.files[0]);
            reader.onload = function(e){
                var pic = document.getElementById("browerPicture");
                pic.src=this.result;
            }
        }

    };
原文地址:https://www.cnblogs.com/t0404/p/10290947.html