在 ASP.NET 中使用 UpdatePanel 控件向用户显示文件上传进度

• 下载源代码 - 2.4 MB

介绍  

本文档描述了 FileUpload 控件在 UpdatePanel 内部的工作方式，以及向用户显示文件 UploadProgress 的过程。

背景

AJAX 在 ASP.NET 开发人员的世界中扮演着重要的角色，尤其是在用户体验和响应速度方面。在许多情况下，我们需要在没有回发的情况下在页面中使用 FileUpload 控件。本文档描述了在 UpdatePanel 中使用 FileUpload 控件以及 UpdateProgress 的工作方式。

问题在于 FileUpload 控件不适用于异步回发，因此无法在 AJAX UpdatePanel 内部使用。本文档允许 FileUpload 控件在 UpdatePanel 内部工作。示例将是一个简单的网页，其中包含一个 FileUpload 控件、一个 Image 控件、一个 Updatepanel 控件、一个 Updateprogress 控件和一个按钮。我们将看到 FileUpload 控件将在带有 UpdateProgress 的 UpdatePanel 内部正常工作。

使用代码

因此，根据我们的需求，我们尝试使用文件上传控件执行完全回发，我们通过触发器来实现这一点。触发器允许开发人员指定哪些事件将导致部分和完全回发。它们必须在 UpdatePanel 内部但 ContentTemplate 外部定义。我们希望创建一个触发器，指示我们用于上传的按钮执行完全回发。更新后的标记如下：

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);
    Label1.Text = "Data Processed Successfully";

}
protected void Upload_Click(object sender, EventArgs e)
{
    if (FU1.HasFile)
    {
        FU1.SaveAs(MapPath("~/Image/" + FU1.FileName));
        System.Drawing.Image img1 = System.Drawing.Image.FromFile(
                         MapPath("~/image/") + FU1.FileName);
        ImageView.ImageUrl = "~/Image/" + FU1.FileName;
    }
}

现在，当我们点击上传按钮时，上传的图像将会在没有异步回发的情况下显示。点击最终提交后，UpdateProgress 将会激活并显示处理图像，数据将准备完成最终处理。

值得关注的点：

在本文中，我们了解了如何将 FileUpload 控件放在 UpdatePanel 内部，以便向用户提供文件正在上传的反馈。许多开发人员都知道这一点，但对于刚开始学习开发的人来说，这将很有用。

历史

2012 年 10 月 11 日：第一个版本。