• JS 上传图片前预览

    上传预览我们可以这么写
    <script   language="javascript">   
      function   test()    {   
      document.all.showimg.src    =document.all.file1.value;   
        
      }       
          </script>    
          <img id="showimg">
        
          <input   type="file"   id="file1"   onchange="test()">
    保存为html文件,运行，一切正常。
    当我们把上面的代码原封不动的拷贝到aspx文件中,运行毫无反应，
    原因在于 对安全的考虑限制image对本地文件的访问(即使你在
    aspx应用程序中用一个html页面替换aspx页面也无济于事.)
    google一下能用滤镜的方式解决此问题.
    在要显示图片的地方加上这段：
    <div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px">
    sizingMethod：有三个选项
    crop：剪切图片以适应对象尺寸。 
    image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 
    scale：缩放图片以适应对象的尺寸边界
    其中有一个src属性是指向图片路径的(必选的);
    可以试一下
    <script language="javascript">
    function ShowImage(path)    {
      document.all.divShow.filters.item(    "DXImageTransform.Microsoft.AlphaImageLoader").src = path;
    }
    </script>
    <body MS_POSITIONING="GridLayout">
                <form id="Form1" method="post" runat="server">
                    <INPUT style="Z-INDEX: 101; LEFT: 232px; POSITION: absolute; TOP: 272px" type="file" onchange="ShowImage(this.value)">
                    <div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px">
                </form>
            </body>
    浏览图片没问题，可是浏览小图Div会小，浏览大图可能会占据整个页面,我们希望以固定的大小显示所有的图片
    可以使用他的scale属性.可是这个属性有个问题，浏览大图时，他会缩小原图，浏览小图时就惨了，他会放大小图，
    使小图模糊不清。
    我们添加个方法改变这种情况。
    function setImg(o)
    {
    var width_img;
    var height_img;

    o.style.visibility     = "visible";
    width_img    =o.offsetWidth;
    height_img    =o.offsetHeight;

    var width    =274;   //预定义宽
    var height=100;  //预定义高


    var ratW;            //宽的缩小比例
    var ratH;        //高的缩小比例
    var rat;         //实际使用的缩小比例
    if(width_img<width && height_img<height)
    {
            //如果比预定义的宽高小，原图显示。
        o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
            return;

        
    }    else{
            //如果大的化，要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高，都不起作用
        o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";

    }
    ratH    =height/height_img;
    ratW    =width/width_img;
    if(ratH<ratW)       //选择最小的作为实际的缩小比例
        rat=ratH;
    else
        rat    =ratW;
        
    width_img    =width_img * rat;
    height_img    =height_img * rat;
    o.style.width    =width_img;
    o.style.height    =height_img;
    }
    修改ShowImage方法
    function ShowImage(path){
         //处理前是原图，先将其隐藏，
     document.all.divShow.style.visibility = "hidden";
    document.all.divShow.filters.item(    "DXImageTransform.Microsoft.AlphaImageLoader").src = path;
    //过一小会获取div的宽高.
    setTimeout("setImg(document.all.divShow)",100);
    }

    以上在IE7中测试通过.
  • 相关阅读:
    9、 docker容器数据卷
    第十八章 MySQL数据库优化
    第十七章 MySQL的VIP漂移和Atlas
    第十六章 MHA高可用（续）
    第一章 shell基础
    第十五章 MHA高可用
    第十四章 MySQL的各种主从
    第十三章 MySQL的主从复制
    第十二章 MySQL的恢复与备份
    第十一章 MySQL日志详解
  • 原文地址：https://www.cnblogs.com/Look_Sun/p/1870555.html
Copyright © 2020-2023  润新知