在ASP.NET中 UpdatePanel实现无刷新上传图片

在ASP.NET中,可以使用UpdatePanel控件实现无刷新上传图片,步骤如下:

1. 在网页中添加ScriptManager控件,用于管理AJAX控件及操作。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager> 

2. 添加FileUpload控件用于选择图片文件,和Button控件用于触发上传。将两个控件放在UpdatePanel控件内。

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="上传" 
            onclick="Button1_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

3. 添加Image控件展示上传的图片,也放在UpdatePanel内。

 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
    <ContentTemplate>
        ...
        <asp:Image ID="Image1" runat="server" />  
    </ContentTemplate>
</asp:UpdatePanel>

4. 编写Button1_Click事件中的上传代码。使用FileUpload控件选择的文件,保存在服务器,并显示在Image控件中。

protected void Button1_Click(object sender, EventArgs e)
{
    string filename = FileUpload1.FileName;
    string ext = filename.Substring(filename.LastIndexOf('.'));
    string savefilename = Guid.NewGuid().ToString() + ext;
    FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Uploads/") + savefilename);
        
    Image1.ImageUrl = "~/Uploads/" + savefilename; 
}  

5. 运行程序,点击“浏览”选择图片上传,点击“上传”按钮,图片即显示在Image控件中, ohne刷新页面。这是通过UpdatePanel控件实现图片无刷新上传的方法。

UpdatePanel通过异步请求和部分页面更新的方式,实现了较好的用户体验。