• 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;
                }
            }
    
        };
  • 相关阅读:
    bzoj1107: [POI2007]驾驶考试egz LIS+单调队列
    poj3134 Power Calculus 迭代加深搜索
    洛谷P3953 逛公园 记忆化搜索
    洛谷P3960 列队 splay
    bzoj1486: [HNOI2009]最小圈 分数规划
    SharePoint Add-in Model (App Model) 介绍 – 概念、托管方式、开发语言
    SharePoint Add-in Model 介绍
    Office Add-In 应用类型及平台支持
    使用 Napa 创建并调试一个 Office 内容应用 – Hello World
    Office Add-in Model 简介
  • 原文地址:https://www.cnblogs.com/t0404/p/10290947.html
Copyright © 2020-2023  润新知