• 网站部署后,ie不能显示本地的图片


    html:
    <div id="imgPreview"  style='144px; height:80px;'>                          <img id='img_browse' title="" src="" alt="" width="144" height="80" />                                                 </div> <asp:FileUpload ID="fupSynopsisPic" onchange='PreviewImage(this)' CssClass="normaltextinputclass" Width="320" runat="server" />

    js:

       function PreviewImage(imgFile)
        {
          var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
          filextension=filextension.toLowerCase();
          if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
          {
              alert("对不起,系统仅支持标准格式的logo,请您调整格式后重新上传,谢谢 !");
              imgFile.focus();
          }
          else
          {
              var path;
              if(document.all)//IE
              {
                  imgFile.select();
                  path = document.selection.createRange().text;
                  document.getElementById("imgPreview").innerHTML="";
                  document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="" + path + "")";//使用滤镜效果   
              }
              else//FF
              {
                  path = imgFile.files[0].getAsDataURL();
                  document.getElementById("img_browse").src = path;
              }
          }
        }


    //////////////////////////////////////

    在IE6中可以很轻易的预览本地图片,只要指定 img的src就可以了。

    但是在IE7中就不行了。

    必须使用AlphaImageLoader属性

    例:

    <style type="text/css">
    #newPreview
    {
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
    </style>
    <script type="text/javascript" language="javascript">

    function PreviewImg(imgFile)
    {   
        var newPreview = document.getElementById("newPreview");
     
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
        newPreview.style.width = "80px";
        newPreview.style.height = "60px";
    }

    </script>
    <div id="newPreview"></div>

    <p>请选择一个图片进行预览:<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p>

     

    在这里:

      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 是一个css滤镜,支持IE5.5以上版本

     filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( enabled=bEnabled, sizingMethod=sSize, src=sURL)
    属性:
    enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
          true : 默认值。滤镜激活。
          false : 滤镜被禁止。

    具体:

     

    说明:

     
    在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式,则0%-100%的透明度也被提供。 
    PNG格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG格式的图片完全透明区域后面的内容。

  • 相关阅读:
    tectangular container
    WIFI
    微信小程序动态改变数组或对象中的某个属性值
    常用的正则表达式
    前端登录通过账号显示对应头像
    JS返回页面时自动回滚到历史浏览位置
    JavaScript让登录或搜索文本框自动获得焦点
    react脚手架应用
    npm教程3_脚手架原理以及bootstrap引入
    npm教程2
  • 原文地址:https://www.cnblogs.com/binbinxiang/p/3521903.html
Copyright © 2020-2023  润新知