您的位置：首页 > 其它

IE下上传图片时预览图片(1.IE7/IE8测试通过; 2.能根据比例缩放图片 )

2011-10-30 21:16 288 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function ShowImage(path, id) {
            //思路： 
            //1.当上传控件路径变化时， 先将图片所在div隐藏;
            //2.将上传控件的值传给图片div的滤镜路径;
            //3.将图片div的sizingMethod设置为'image'——目的是取得图片的原始大小。因为此状态下与图片的原始大小是一致的。
            //4.过一小会儿获取div的宽高——之所以要过一会儿， 原因是图片显示出来需要时间。
            var picid = document.getElementById(id);
            picid.style.visibility = "hidden";      //处理前是原图，先将其隐藏，
            picid.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
            picid.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
            setTimeout(function () { setImg(picid); }, 100);    //过一小会获取div的宽高.
        }
        function setImg(obj) {
            //5.如果取得的图片比预定义的宽高小， 原图显示就好了。
            //6.否则如果图片太大, 将图片的sizingMethod改成"scale", 这样图片可以缩放的形式显示;
            //7.宽比例=预定义宽/实际宽, 高比例=预定义高/实际高;
            //8.取其中一个较小的作为显示时的显示比例;
            //9.计算得到显示时的实际宽高, 并赋给图片div对应的属性;

            var width_img;
            var height_img;
            obj.style.visibility = "visible";
            width_img=obj.offsetWidth;
            height_img=obj.offsetHeight;

            var width=274;   //预定义宽
            var height=100; //预定义高
            var ratW;        //宽的缩小比例
            var ratH;        //高的缩小比例
            var rat;         //实际使用的缩小比例
            if(width_img<=width && height_img<=height)
            {
                //如果比预定义的宽高小，原图显示。
                obj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod ="image";
                return;
            }else{
                //如果大的话，要把 sizingMethod改成scale 如果属性是image, 不管怎么改div的宽高，都不起作用
                obj.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;
            obj.style.width=width_img;
            obj.style.height=height_img;
        }
    </script>
</head>
<body>
    <h2>切记:</h2>
    <ol>
        <li>此法只在IE下有效, 请在IE下测试</li>
        <li>IE下, 必须设置"工具","Internet选项",选项卡"安全"——"可信站点",将你测试的站点添加进去才行.否则会出"系统找不到指定的资源"的 (特别是ie8, 很多人localhost测试没有问题, 上传到服务器有问题就是因为服务器没有添加为信任站点) .</li>
    </ol>
    <input type="file" name="pic1" size="10" onchange="ShowImage(this.value,'showpic1')" />
    <div id="showpic1" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width: 274px; height: 100px">
    </div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航