c# - 在异步实现文件上传控制时，UpdateProgress 和触发器部分在更新面板中不起作用

Question

我正在尝试使用更新面板内的 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.........
}

提前致谢。感谢您的帮助。

Answer 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进一步阅读。