UpdatePanel中Repeater内FileUpload跨面板提交后文件丢失的解决办法

这个问题我之前帮不少开发者排查过，核心矛盾点在于ASP.NET AJAX的局部回发机制和FileUpload控件的工作原理不兼容，具体原因和解决方案我给你拆解清楚：

为什么会出现这个问题？ #

• 首先，FileUpload控件依赖完整的HTTP POST请求来传递文件的二进制数据，但UpdatePanel默认用的是AJAX局部回发（Partial Postback），这种回发只会传递页面的视图状态和文本表单数据，根本不会携带文件内容。
• 其次，你点击的是另一个独立UpdatePanel里的保存按钮，触发的是这个Panel的局部回发，此时Repeater所在的UpdatePanel并没有参与到这次回发的状态维护中，导致遍历Repeater时，FileUpload.HasFile自然返回false。

靠谱的解决方案 #

方案1：让保存按钮触发完整回发 #

这是最直接的解决办法，只要让保存按钮触发整个页面的完整回发，就能让FileUpload的文件数据被正常提交。具体操作有两种：

• 方法一：通过ScriptManager注册回发触发器
  在页面的ScriptManager标签里，把保存按钮指定为PostBackTrigger：

  <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Triggers>
          <asp:PostBackTrigger ControlID="btnSave" />
      </Triggers>
  </asp:ScriptManager>
  

  这样点击btnSave时，就会触发完整回发，此时遍历Repeater就能正确获取到FileUpload里的文件了。
• 方法二：修改按钮的提交行为
  给保存按钮添加UseSubmitBehavior="false"属性，不过这种方式不如第一种直观，更推荐用触发器的方式。

方案2：调整UpdatePanel的范围（可选） #

如果业务场景允许，可以把Repeater和保存按钮放到同一个UpdatePanel里，这样局部回发时会包含整个Panel的内容。不过要注意：即使在同一个UpdatePanel里，局部回发还是不能上传文件，所以最终还是要给保存按钮设置PostBackTrigger，触发完整回发。

方案3：用异步文件上传控件替代原生FileUpload #

如果想要保留AJAX局部回发的页面无刷新体验，可以使用ASP.NET AJAX Control Toolkit里的AsyncFileUpload控件，或者自己用JavaScript实现基于FormData的异步上传。这种方式不需要依赖页面回发，就能在后台接收文件，同时保持页面的局部更新效果。

举个AsyncFileUpload的简单示例：

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
                    OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
            </ItemTemplate>
        </asp:Repeater>
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:Button ID="btnSave" runat="server" Text="保存" OnClick="btnSave_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

你可以在AsyncFileUpload1_UploadedComplete事件里把文件临时保存到服务器的临时目录，点击保存按钮时再把临时文件移到最终的存储位置。

关键提醒 #

• 原生FileUpload在任何局部回发场景下都没法正确提交文件，这是ASP.NET AJAX的设计限制，不是控件的bug。
• 如果用完整回发的方案，要确保页面的ViewState是启用的，这样Repeater的状态才能被正确恢复，遍历的时候才能找到对应的FileUpload控件。

内容的提问来源于stack exchange，提问作者Afzaal