zoukankan      html  css  js  c++  java
  • 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;
                }
            }
    
        };
  • 相关阅读:
    分布式系统的负载均衡以及ngnix负载均衡的五种策略
    排序
    servlet+forward和direct区别
    https、socket、http协议
    类加载机制+变量初始化
    MySQL中的索引
    线程状态
    JVM的分区+查看GC对象是否存活+3种GC算法+7种垃圾收集器+如何减少GC次数
    ORACLE索引监控的简单使用
    如何验证所做的AIX系统备份是否可用
  • 原文地址:https://www.cnblogs.com/t0404/p/10290947.html
Copyright © 2011-2022 走看看