2007年11月1日

asp.net在ie7中使用FileUpload上传前预览图片

因为安全性问题，IE7禁用了image控件引用本地图片，为了这个问题郁闷了好几天，终于找到了解决方案，好东西要与大家分享，代码如下：

此段代码放于<head> ....</head>之间
<style type="text/css">#newPreview {
 FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
</style> 
<body>内的代码

<script language="javascript" type="text/javascript">
   function PreviewImg(imgFile)
{    
    var newPreview = document.getElementById("newPreview");
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    newPreview.style.width = "80px";
    newPreview.style.height = "60px";
}

</script> 

<asp:FileUpload ID="Fud_Pic" runat="server" onchange="PreviewImg(this)" /><div id="newPreview"></div>

posted @ 2007-11-01 18:32 jueban's space 阅读(84) 评论(0) 编辑

纯CSS Lightbox效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>纯CSS Lightbox效果</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

posted @ 2007-11-01 18:29 jueban's space 阅读(218) 评论(1) 编辑