HtmlInputFile控件“浏览”选择图片文件后即刻在Image控件中显示

如标题，一个HtmlInputFile控件，一个“上传”按钮，已经实现上传图片文件，文件格式限制。
现在遇见一个新问题，想提供图片文件的浏览，但是不是在点击“上传”按钮之后，那简单。是想在点击HtmlInputFile控件的“浏览”按钮选择好图片文件后即刻在Image控件中显示出来。 private void Page_Load(object sender, System.EventArgs e)
{
if(!(File1.Value==""))
{
Image1.ImageUrl=File1.Value;
}
// 在此处放置用户代码以初始化页面
} #region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{    
this.Button1.Click += new System.EventHandler(this.Button1_Click);
this.Load += new System.EventHandler(this.Page_Load); }
#endregion private void Button1_Click(object sender, System.EventArgs e)
{
// string fullFileName=this.File1.PostedFile.FileName;
// string fileName=fullFileName.Substring(fullFileName.LastIndexOf("\\")+1);
//// this.File1.PostedFile.SaveAs(Server.MapPath("up")+"\\"+fileName);
// string type=fullFileName.Substring(fullFileName.LastIndexOf(".")+1);
// if(type=="bmp"||type=="JPG"||type=="gif")
// {
// this.File1.PostedFile.SaveAs(Server.MapPath("up")+"\\"+fileName);
// this.Image1.ImageUrl="up"+"\\"+fileName;
// }
// else
// {
// Response.Write("<script language='javascript'>alert('请上传正确的图片格式');</script>");
// }
}如上，Page_Load事件中简单赋值了，但是还是得单击按钮才能触发。很郁闷。asp.net的回传到底时怎么控制的呢，教材上说的太空，请高手解我之惑，不胜感激！

解决方案 »

  1.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpPhoto.aspx.cs" Inherits="UpPhoto" %><!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>无标题页</title>
         <script type="text/javascript" language="javascript"> 
            function display(abc) { 
                alert(abc.value); 
                document.getElementById("img").src = abc.value; 
                var id1 = document.getElementById("id1"); 
                id1.style.background ="url("+ abc.value +")"; 
            } 
        </script> </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <br />
            <asp:Image ID="img" runat="server" Height="124px" Width="156px" /><br />
            <br />
        <input id="UpdatePhoto" name="UpdatePhoto" runat="server" type="file" onchange="display(this)">
            &nbsp;
        <asp:Button id="btnAdd" name="btnAdd" runat="server" Text="上传" OnClick="btnAdd_Click"></asp:Button><br />
            <br />
            <asp:Label ID="Label1" runat="server" Text="GID"></asp:Label>
            <asp:TextBox ID="txtGID" runat="server"></asp:TextBox><br />
            <asp:Label ID="Label2" runat="server" Text="CID"></asp:Label>
            <asp:TextBox ID="txtCID" runat="server"></asp:TextBox></div>
        </form>
    </body>
    </html>
      

  2.   

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpPhoto.aspx.cs" Inherits="UpPhoto" %><!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>无标题页</title>
         <script type="text/javascript" language="javascript"> 
            function display(abc) { 
                alert(abc.value); 
                document.getElementById("img").src = abc.value; 
                var id1 = document.getElementById("id1"); 
                id1.style.background ="url("+ abc.value +")"; 
            } 
        </script> </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <br />
            <asp:Image ID="img" runat="server" Height="124px" Width="156px" /><br />
            <br />
        <input id="UpdatePhoto" name="UpdatePhoto" runat="server" type="file" onchange="display(this)">
            &nbsp;
        <asp:Button id="btnAdd" name="btnAdd" runat="server" Text="上传" OnClick="btnAdd_Click"></asp:Button><br />
            <br />
            <asp:Label ID="Label1" runat="server" Text="GID"></asp:Label>
            <asp:TextBox ID="txtGID" runat="server"></asp:TextBox><br />
            <asp:Label ID="Label2" runat="server" Text="CID"></asp:Label>
            <asp:TextBox ID="txtCID" runat="server"></asp:TextBox></div>
        </form>
    </body>
    </html>