在更新面板中使用文件上传显示进度更新

Question

我正在 asp.net 使用 VS2013 和 C# (webforms) 开发一个网站。我有一个接受一些用户输入的页面，包括 <asp:FileUpload> 服务器控件。整个表单都在更新面板内，允许我显示进度更新 div，当用户提交表单时弹出。

我读到在更新面板中有文件上传服务器控件会导致问题，所以我使用 <asp:PostBackTrigger> 强制回发，以便上传控件的 .HasFile 属性并不总是错误的。

在整个站点中，当由于 DB activity 而出现延迟时，我使用 <asp:UpdatePanel> 和 <asp:UpdateProgress> 向用户显示存在一些 activity 和以保护表单在用户点击提交后不被更改或重新提交。它工作正常。

问题是 <asp:PostBackTrigger> 也在阻止 <asp:UpdateProgress> 出现。这使得表单在提交后容易受到不需要的用户输入的影响，并且也是一种糟糕的用户体验。所以我在 catch22 - 我无法删除 PostBackTriggers，因为那样文件上传控件将无法工作，并且我无法在提交时使用 UpdateProgress，因为 PostBackTriggers 阻止它显示。

一些代码：

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

    <%-- Some irrelevant code left out --%>
            <div class="row">
              <div class="input-group col-sm-6">
                <span class="input-group-addon" style="width: 175px; text-align: right;" id="basic-addon10">Signature</span>
                <asp:FileUpload ID="uplSignature" runat="server" CssClass="form-control" />
              </div>

              <%-- Some irrelevant code left out --%>

  </ContentTemplate>
  <Triggers>
    <asp:PostBackTrigger ControlID="btnSubmit" />
  </Triggers>
  <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
    <ProgressTemplate>
      <div class="updateProgressMain" style="position: fixed;">
        <div class="updateProgressDiv" style="position: fixed;">
          <img src="Images/loader.gif" alt="" />
        </div>
      </div>
    </ProgressTemplate>
  </asp:UpdateProgress>

解决此问题的最佳方法是什么？

提前感谢您的帮助。

EDIT - 我接受了使用 Ajax 控制工具包中的 Ajax 文件上传控制作为答案，因为它确实可以解决问题我的问题。我对它并不感到兴奋，因为我发现很难设计样式以匹配我网站的外观和感觉 - 但它确实有效。谢谢建议。

Answer 1

我会看一下 Ajax 控件工具包附带的 AjaxFileUpload 控件。

我之前遇到过类似的问题，记得 ajax 一个对我有用。

您可以在这里找到一些相关信息： https://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx

要获取 Ajax 控件工具包，只需在 NuGet 中搜索即可。

在更新面板中使用文件上传显示进度更新

Show Progress Update with File Upload in Update Panel

c#

asp.net

updatepanel

webforms

file-upload