ASP.NET WebForms多图上传问题求助：逐个选图仅传一张

核心原因 #

WebForms的FileUpload控件依赖ViewState保存已选文件列表，但如果页面在逐个选择文件时发生意外回发（比如关联控件开启了AutoPostBack），会直接清空之前的文件选择记录，最终仅保留最后一次选择的文件。另外，默认的FileUpload控件未做特殊处理时，无法跨回发保留多文件选择状态。

解决方案 #

1. 禁用不必要的AutoPostBack #

检查页面内所有与文件操作相关的控件，关闭不必要的AutoPostBack，避免每次选文件触发页面回发丢失数据：

<!-- 错误示例：开启AutoPostBack会导致回发清空已选文件 -->
<asp:DropDownList ID="ddlImageType" runat="server" AutoPostBack="true"></asp:DropDownList>

<!-- 正确设置：关闭非必须的AutoPostBack -->
<asp:DropDownList ID="ddlImageType" runat="server" AutoPostBack="false"></asp:DropDownList>

2. 用Session临时存储已选文件 #

通过Session暂存每次选择的文件流，最后提交时统一保存，避免回发丢失：

// 页面后台代码
protected void btnAddFile_Click(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        // 从Session获取已存储的文件列表，无则初始化
        List<HttpPostedFile> fileList = Session["TempUploadFiles"] as List<HttpPostedFile> ?? new List<HttpPostedFile>();
        
        // 添加当前选择的文件，限制最多4张
        if (fileList.Count < 4)
        {
            fileList.Add(FileUpload1.PostedFile);
        }
        else
        {
            lblTip.Text = "最多只能选择4张图片";
            return;
        }
        
        // 更新Session
        Session["TempUploadFiles"] = fileList;
        lblFileCount.Text = $"已选择 {fileList.Count} 张图片";
    }
}

protected void btnSaveAll_Click(object sender, EventArgs e)
{
    List<HttpPostedFile> fileList = Session["TempUploadFiles"] as List<HttpPostedFile>;
    if (fileList != null && fileList.Count > 0)
    {
        string saveDir = Server.MapPath("~/UploadImages/");
        // 确保存储目录存在
        if (!Directory.Exists(saveDir)) Directory.CreateDirectory(saveDir);
        
        foreach (HttpPostedFile file in fileList)
        {
            // 生成唯一文件名避免覆盖
            string uniqueName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
            file.SaveAs(Path.Combine(saveDir, uniqueName));
        }
        
        // 清空Session
        Session["TempUploadFiles"] = null;
        lblResult.Text = "所有图片上传成功";
    }
}

注：若上传文件较大或并发量高，建议将文件先保存到服务器临时目录，再把临时文件路径存入Session，减少内存占用。

3. 前端优化：开启HTML5多文件选择 #

修改FileUpload控件属性，直接支持多文件选择，同时前端限制数量，避免用户逐个选择的操作：

<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" accept="image/*" />
<script>
    document.getElementById('<%= FileUpload1.ClientID %>').addEventListener('change', function(e) {
        if (this.files.length > 4) {
            alert('最多只能选择4张图片');
            this.value = ''; // 清空当前选择
        }
    });
</script>

这种方式支持按住Ctrl逐个选择文件，且不会触发回发丢失数据，是最简洁的解决方案。

4. 处理UpdatePanel的影响 #

如果页面使用了UpdatePanel，必须将FileUpload的提交按钮设置为PostBackTrigger，否则异步回发会导致文件无法上传：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true" />
        <asp:Button ID="btnUpload" runat="server" Text="确认上传" OnClick="btnUpload_Click" />
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload" />
    </Triggers>
</asp:UpdatePanel>

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