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

<%@ 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>

posted on 2012-06-15 14:00  超银  阅读(192)  评论(0)    收藏  举报

导航