zoukankan      html  css  js  c++  java
  • 即刻显示图片,兼容ie,firefox

    ********

    //file控件,file控件id,img控件id
        function preImg(imgFile,sourceId, targetId) {        
            var filepath=$("#"+sourceId).val();
            var reg = /.+(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$/g;
            if(!reg.test(filepath)){
                alert("图片格式不正确");
                $("#preview").hide();
                return;
            }
           if(typeof FileReader=='undefined'){  //针对ie
                /* alert('你的浏览器不支持filereader'); */
          $("#preview2").show();
    var imgDiv=document.getElementById(targetId); imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)"; imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =getPath(imgFile); //alert(getPath(imgFile));//绝对地址 }else{ /* alert('支持filereader'); */ //针对ie以外的其他浏览器

          $("#preview").show();
    var reader = new FileReader(); reader.onload = function(e) { var img = document.getElementById(targetId); img.style.display="block"; img.src = this.result; } reader.readAsDataURL(document.getElementById(sourceId).files[0]); } } function getPath(obj) { if(obj){ if (window.navigator.userAgent.indexOf("MSIE")>=1){ obj.select(); return document.selection.createRange().text; } else if(window.navigator.userAgent.indexOf("Firefox")>=1){ if(obj.files){ return obj.files.item(0).getAsDataURL(); } return obj.value; } return obj.value; } }

    jsp页面

    <fieldset>
                                <legend>上传学生照片</legend>
                                <input type="file" class="input_text" name="upload1" id="upload1"
                                    style=" 60%" onchange="preImg(this,this.id,'imgPre')"/>
                            </fieldset>

    显示照片 

    <div id="preview">
                                            <img width="115px" height="130px" id="imgPre"/>
                                        </div>
                                        <div id="preview2" style="115px;height:130px;">  //针对ie,如果用了image控件,会有一个小图标,视觉不好,所以如果是ie,隐藏preview,显示preview2
                                        </div>

    *******

    有问题在公众号【清汤袭人】找我,时常冒出各种傻问题,然一通百通,其乐无穷,一起探讨


  • 相关阅读:
    手机精准定位,看好你的男朋友
    顶级分享,三端看片的日子来了
    这样的声音谁受的了呀
    白嫖vip电台,资源随意听
    老板止步!这里全是小姐姐
    粉丝福利。无视墙 来看看全世界的网站吧
    利用自己的服务器搭建专属私有云盘&博客园搬家
    Photoshop 2020 安装教程
    TensorFlow基础——常用函数(一)
    Scala基本语法入门
  • 原文地址:https://www.cnblogs.com/qingmaple/p/4118943.html
Copyright © 2011-2022 走看看