ASP.NET Web Forms刷新时丢失上传路径问题求助

核心问题根源 #

所有已上传文件/预览丢失的本质是页面全量回发：当设置AutoPostBack="true"的控件触发回发时，整个页面重新加载，FileUpload控件的文件数据会被清空，客户端预览的图片也会因页面刷新丢失。

具体解决思路 #

1. 移除不必要的AutoPostBack

如果txtName、txtSurname这类输入框不需要实时服务器端处理（比如实时验证、联动数据），直接去掉AutoPostBack="true"：

<asp:TextBox ID="txtName" runat="server" placeholder="Name"></asp:TextBox>
<asp:TextBox ID="txtSurname" runat="server" placeholder="Surname"></asp:TextBox>

若必须做实时验证，改用客户端JavaScript实现，避免触发服务器回发。

2. 用UpdatePanel实现局部回发

将需要回发的控件（标题、字体选择等）放入UpdatePanel，上传和预览区域留在外面，只刷新局部内容：

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

<!-- 上传与预览区域，不参与局部回发 -->
<asp:FileUpload ID="uploadImage" runat="server" CssClass="uploads" onchange="ShowImageBackPreview(this)" />
<asp:Image ID="imagePreview" Height="150px" Width="250px" runat="server" />

<!-- 需要回发的控件放入UpdatePanel -->
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
    <ContentTemplate>
        <asp:TextBox ID="txtName" runat="server" AutoPostBack="true" placeholder="Name"></asp:TextBox>
        <asp:TextBox ID="txtSurname" runat="server" AutoPostBack="true" placeholder="Surname"></asp:TextBox>
        <!-- 标题、字体选择控件也放在这里 -->
    </ContentTemplate>
    <!-- 若有上传按钮，需指定全页回发触发器 -->
    <Triggers>
        <asp:PostBackTrigger ControlID="btnSubmitUpload" />
    </Triggers>
</asp:UpdatePanel>

注意：FileUpload控件无法通过UpdatePanel的异步回发上传文件，因此必须将上传操作设为全页回发（通过PostBackTrigger）。

3. 客户端缓存预览数据（恢复预览用）

即使回发，用JS将预览的Base64数据存入隐藏域，页面加载后恢复预览：

function ShowImageBackPreview(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var imgSrc = e.target.result;
            $('#<%=imagePreview.ClientID%>').prop('src', imgSrc).width(240).height(150);
            // 存入隐藏域
            $('#<%=hdnImagePreview.ClientID%>').val(imgSrc);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

// 页面加载时恢复预览
$(document).ready(function() {
    var savedSrc = $('#<%=hdnImagePreview.ClientID%>').val();
    if (savedSrc) {
        $('#<%=imagePreview.ClientID%>').prop('src', savedSrc).width(240).height(150);
    }
});

后台添加隐藏域：

<asp:HiddenField ID="hdnImagePreview" runat="server" />

⚠️ 此方法仅恢复预览，文件本身仍需在回发前保存到服务器/Session，否则回发后FileUpload的文件数据会丢失。

4. 提前保存文件到Session/临时目录

在用户选择文件后，通过回发将文件存入Session，页面加载时从Session恢复：
后台C#代码：

protected void uploadImage_Change(object sender, EventArgs e)
{
    if (uploadImage.HasFile)
    {
        // 将文件字节存入Session
        byte[] fileBytes = new byte[uploadImage.PostedFile.ContentLength];
        uploadImage.PostedFile.InputStream.Read(fileBytes, 0, fileBytes.Length);
        Session["UploadedImage"] = fileBytes;
        Session["ImageFileName"] = uploadImage.FileName;
        Session["ImageContentType"] = uploadImage.PostedFile.ContentType;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) return;
    // 回发后从Session恢复预览
    if (Session["UploadedImage"] != null)
    {
        byte[] fileBytes = (byte[])Session["UploadedImage"];
        string base64 = Convert.ToBase64String(fileBytes);
        imagePreview.ImageUrl = $"data:{Session["ImageContentType"]};base64,{base64}";
    }
}

前台绑定事件：

<asp:FileUpload ID="uploadImage" runat="server" CssClass="uploads" onchange="ShowImageBackPreview(this);" OnChange="uploadImage_Change" />

注意：需定期清理Session或临时目录的文件，避免占用服务器空间。

5. 修正表单enctype属性

你之前使用的enctype="multipledata"是错误的，正确的文件上传表单编码应为multipart/form-data，可在Page指令中设置：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="YourPage.aspx.cs" Inherits="YourNamespace.YourPage" enctype="multipart/form-data" %>

此设置是文件成功上传到服务器的必要条件，但无法直接解决回发丢失问题。

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