上传图片预览-兼容IE6，IE7，IE8，FF

huanyq2008

浏览: 171727 次
性别:
来自: 成都

最近访客更多访客>>

聪明的雨果

u013052238

u013448485

1306684518qq.com

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web开发

IE Microsoft Firefox JavaScript XHTML

<!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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8"/>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7/>
    <title>Firefox3,IE6,IE7,IE8上传图片预览</title>
    <style type="text/css">
        #preview_wrapper
        {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: #CCC;
        }
        #preview_fake
        {
            /* 该对象用户在IE下显示预览图片 */
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
        }
        #preview_size_fake
        {
            /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            visibility: hidden;
        }
        #preview
        {
            /* 该对象用户在FF下显示预览图片 */
            width: 300px;
            height: 300px;
        }
    </style>

        function onPreviewLoad(sender)
        {
            autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
        }

        function autoSizePreview(objPre, originalWidth, originalHeight)
        {
            var zoomParam = clacImgZoomParam(300, 300, originalWidth, originalHeight);
            objPre.style.width = zoomParam.width + 'px';
            objPre.style.height = zoomParam.height + 'px';
            objPre.style.marginTop = zoomParam.top + 'px';
            objPre.style.marginLeft = zoomParam.left + 'px';
        }

        function clacImgZoomParam(maxWidth, maxHeight, width, height)
        {
            var param = { width: width, height: height, top: 0, left: 0 };

            if (width > maxWidth || height > maxHeight)
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;

                if (rateWidth > rateHeight)
                {
                    param.width = maxWidth;
                    param.height = height / rateWidth;
                }
                else
                {
                    param.width = width / rateHeight;
                    param.height = maxHeight;
                }
            }

param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;

            return param;
        }
    </script>

</head>
<body>
    <div id="preview_wrapper">
        <div id="preview_fake">
            <img id="preview" onload="onPreviewLoad(this)" />
        </div>
    </div>
    <br />
    <input id="upload_img" type="file" onchange="onUploadImgChange(this)" />
    <br />
    <img id="preview_size_fake" />
</body>
</html>

上传图片预览-兼容IE6、IE7、IE8、FF.rar (1.8 KB)
下载次数: 0

分享到：

中国筷子的十二种忌讳，每天在用你知道吗 | 品味经典语录

2011-01-20 14:07
浏览 726
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论