上传图片前预览(兼容Firefox3,IE6,IE7,IE8)

最新推荐文章于 2024-09-14 08:45:16 发布

gdlpc

最新推荐文章于 2024-09-14 08:45:16 发布

阅读量1.4k

点赞数 1

分类专栏： asp.net 文章标签： ie firefox button wrapper function server

本文链接：https://blog.csdn.net/gdlpc/article/details/5277207

版权

asp.net 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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';
}

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table style="width: 307px">
        <tr>
            <td colspan="3" rowspan="3">
               <div id="preview_wrapper">
        <div id="preview_fake">
            <img src="" alt="图片预览" id="preview" οnlοad="onPreviewLoad(this)"/>
        </div>
    </div> </td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
    </table>
    <br/>
     
        <asp:FileUpload ID="FileUpload1" runat="server" />
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /><br/> 
        
    <img src="" alt="图片预览" id="preview_size_fake"/>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </div>
    </form>
</body>
</html>