异步执行文件上传控制时，UpdateProgress 和触发部分在更新面板中不起作用答案

【问题标题】：UpdateProgress and trigger section not working in Update panel while implement file upload control asynchronously异步执行文件上传控制时，UpdateProgress 和触发部分在更新面板中不起作用
【发布时间】：2013-10-01 11:14:01
【问题描述】：

我正在尝试在更新面板中使用 asp.net 文件上传控件上传图像文件。我想处理 UpdateProgress 以显示进度条图像，指示进度以及文件上传。

案例 1： 当我删除触发部分并使用 UpdateProgress 部分时，进度过程工作正常，但文件上传控件无法上传我的文件。 [页面没有重新加载]

案例 2： 当我使用触发器部分并删除 UpdateProgress 部分时，文件被上传但页面被重新加载。

预期：我真正想要的是一个很好的文件上传过程，其中包括 UpdateProgress 以显示进度图像并且严格没有页面加载。

我去过的是：

.aspx 部分

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


<asp:UpdateProgress ID="loading" runat="server">

<ProgressTemplate>

<asp:Image ID="Image1" CssClass="loadingGeneral" ImageUrl="../Images/loading(1).gif" AlternateText="Processing" runat="server" />

</ProgressTemplate>

  </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

    <asp:FileUpload ID="fileUploadForAlbum" multiple="true" CssClass="buttonclass"  runat="server"  ToolTip="Click to browse image." />
    <asp:Button ID="btn_uploadAlbum" runat="server" class="buttonclass" OnClick="btnUploadAlbum_Click" Text="Upload Slider" />

    </ContentTemplate>
        <Triggers>
             <asp:PostBackTrigger ControlID="btn_uploadAlbum" />
        </Triggers>
        </asp:UpdatePanel>

.aspx.cs 部分

文件上传代码部分很好，我已经使用以下来实现进度条。

   protected void btnUploadAlbum_Click(object sender, EventArgs e)
{
            System.Threading.Thread.Sleep(2000);
            do something.........
}

提前致谢。任何帮助表示赞赏。

【问题讨论】：

这是一个非常复杂的问题，已经被众多第三方工具解决了。我选择的异步上传工具是 PlUpload：plupload.com

标签： c# asp.net file-upload updatepanel

【解决方案1】：

关于FileUpload 控制，有一些有趣的事实需要了解。

1.) 文件上传控制不适用于异步回发。它总是需要回发才能正常工作。这就是您看到整页回发的原因。

2.) AsyncPostbackTrigger 在这里无助于防止回发。

MSDN 明确表示：

The FileUpload control is designed to be used only in postback scenarios 
and not in asynchronous postback scenarios during partial-page rendering.
When you use a FileUpload control inside an UpdatePanel control, the file must
be uploaded by using a control that is a PostBackTrigger object for the panel

由此推断出我们的第三点：

3.) 我们需要使用PostBackTrigger 使FileUpload 控件与UpdatePanel 一起工作，然后将进行整页回发。

您的问题：

What I really want is a fine file upload process that includes UpdateProgress 
to show progress image and strictly with no page loads

对此的一个很好的答案是使用AsyncFileUpload 控件。该控件的特点：

它在更新面板中工作
您可以使用ThrobberID 属性在文件上传过程中显示加载图像。
它上传文件而不进行任何回发
它提供客户端和服务器端事件
显示文件上传有不同的着色选项。比如上传成功显示绿色：使用CompleteBackColor属性，否则上传失败显示红色，使用ErrorBackColor属性。

在您的.aspx 页面上，放置一个脚本管理器并注册 Ajax 控制工具包 DLL。

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" TagPrefix="ajaxasyncFU" %>

现在放置AsyncFileUpload控件：

<ajaxasyncFU:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" 
OnClientUploadComplete="UploadComplete" 
CompleteBackColor="Lime" UploaderStyle="Modern" 
ErrorBackColor="Red" ThrobberID="Throbber" 
onuploadedcomplete="AsyncFileUpload1_UploadedComplete" 
UploadingBackColor="#66CCFF" />

您可以使用 3 个客户端事件：OnClientUploadError、OnClientUploadStarted 和 OnClientUploadComplete

还有一个服务器端事件：onuploadedcomplete，它以异步方式调用，从而避免了整页回发。在这个服务器事件中，我们通常保存文件：

protected void AsyncFileUpload1_UploadedComplete
    (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{      
  if (AsyncFileUpload1.HasFile)
  {
    string strPath = MapPath("~/MyImages/") + Path.GetFileName(e.filename);
    AsyncFileUpload1.SaveAs(strPath);
  }
}

查看这两个链接：Link1、Link2 以进一步阅读。

【讨论】：