Jie

心若无尘,一花一世界,一鸟一天堂;心若静,已如涅磐,风声物语,皆可成言.
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

使用FileUpload控件上传前预览图片

Posted on 2007-12-08 23:31  JieNet  阅读(4377)  评论(3)    收藏  举报
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PreviewImageInFileUpload.aspx.cs" Inherits="PreviewImageInFileUpload" %>

<!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">
    <title>Preview Image In FileUpload</title>
    <%--CSS--%>
    <style type="text/css">
        #newPreview{
            FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
        }
    </style>
</head>
<body>
    <%--JavaScript--%>
    <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>

    <form id="form1" runat="server">
        <div>
            <%--添加onchange事件--%>
            <asp:FileUpload ID="FileUpload1" runat="server" onchange="PreviewImg(this)"  />
        </div>
        <%--建立一个div来存放预览--%>
        <div id="newPreview"></div>
            
    </form>
</body>
</html>