JS 上传图片前预览

zoukankan html css js c++ java

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中测试通过.

查看全文

相关阅读:
HDU 4024 Dwarven Sniper’s hunting（数学公式或者是二分）
二分图最大匹配总结
 HDU 4022 Bombing （STL应用）
HDU 1847 Good Luck in CET4 Everybody!（组合博弈）
HDU 1556 Color the ball（树状数组）
HDU 4023 Game（博弈）
HDU 1406 完数(水题）
HDU 4021 24 Puzzle
Oracle 多表查询优化
 【编程之美】字符串移位包含的问题（续）

原文地址：https://www.cnblogs.com/Look_Sun/p/1870555.html