Razor View中无JS/JQuery实现表单提交前图片预览问题

嘿，我来帮你搞定这个问题！你现在遇到的核心痛点是每次上传单张图片时，之前预览的另外两张会消失——这其实是HTTP无状态的特性导致的：每次表单提交后，之前的文件数据不会自动保留，ViewBag里自然只剩当前上传的那张。咱们用「临时存储+状态回显」的思路就能解决，完全不用JS/JQuery，纯后端Action+Razor就能实现，还能减少按钮数量。

1. 先搭个临时存储的基础 #

首先得在服务器上建个临时文件夹，用来存用户上传的预览图（记得后续要定时清理，不然会占空间）。比如在项目根目录的wwwroot下创建TempUploads文件夹，给应用开读写权限。

2. 用Model替代ViewBag（更靠谱） #

虽然你之前用ViewBag，但用强类型Model来管理上传状态会更清晰，不容易出错。新建一个ViewModel：

public class ImageUploadViewModel
{
    // 接收上传的文件（.NET Framework用HttpPostedFileBase替代IFormFile）
    public IFormFile Image1 { get; set; }
    public IFormFile Image2 { get; set; }
    public IFormFile Image3 { get; set; }
    
    // 存储已上传图片的临时路径，用来回显预览
    public string PreviewImage1Path { get; set; }
    public string PreviewImage2Path { get; set; }
    public string PreviewImage3Path { get; set; }
}

3. 编写处理上传的Action #

这个Action要做两件事：一是处理新上传的图片，二是保留已经上传的预览状态。关键逻辑是每次提交时，把已有的预览路径回传并保留：

public IActionResult UploadImages(ImageUploadViewModel model)
{
    // 临时目录的物理路径
    var tempDir = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "TempUploads");
    if (!Directory.Exists(tempDir))
    {
        Directory.CreateDirectory(tempDir);
    }

    // 处理图片1的上传
    if (model.Image1 != null && model.Image1.Length > 0)
    {
        // 用GUID生成唯一文件名，避免重名
        var fileName = Guid.NewGuid() + Path.GetExtension(model.Image1.FileName);
        var filePath = Path.Combine(tempDir, fileName);
        
        // 保存文件到临时目录
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            model.Image1.CopyTo(stream);
        }
        
        // 更新预览路径（用相对URL，方便Razor渲染）
        model.PreviewImage1Path = $"/TempUploads/{fileName}";
    }
    // 如果没有新上传，检查之前的临时文件是否还存在，不存在就清空路径
    else if (!string.IsNullOrEmpty(model.PreviewImage1Path))
    {
        var fullPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", model.PreviewImage1Path.TrimStart('/'));
        if (!System.IO.File.Exists(fullPath))
        {
            model.PreviewImage1Path = null;
        }
    }

    // 同理处理图片2
    if (model.Image2 != null && model.Image2.Length > 0)
    {
        var fileName = Guid.NewGuid() + Path.GetExtension(model.Image2.FileName);
        var filePath = Path.Combine(tempDir, fileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            model.Image2.CopyTo(stream);
        }
        model.PreviewImage2Path = $"/TempUploads/{fileName}";
    }
    else if (!string.IsNullOrEmpty(model.PreviewImage2Path))
    {
        var fullPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", model.PreviewImage2Path.TrimStart('/'));
        if (!System.IO.File.Exists(fullPath))
        {
            model.PreviewImage2Path = null;
        }
    }

    // 同理处理图片3
    if (model.Image3 != null && model.Image3.Length > 0)
    {
        var fileName = Guid.NewGuid() + Path.GetExtension(model.Image3.FileName);
        var filePath = Path.Combine(tempDir, fileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            model.Image3.CopyTo(stream);
        }
        model.PreviewImage3Path = $"/TempUploads/{fileName}";
    }
    else if (!string.IsNullOrEmpty(model.PreviewImage3Path))
    {
        var fullPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", model.PreviewImage3Path.TrimStart('/'));
        if (!System.IO.File.Exists(fullPath))
        {
            model.PreviewImage3Path = null;
        }
    }

    // 如果用户点击的是「保存到数据库」按钮
    if (Request.Form.ContainsKey("SaveToDb"))
    {
        // 这里写保存到数据库的逻辑：比如把临时文件移到正式目录，或者读取文件内容存库
        // 示例：SaveImagesToDb(model.PreviewImage1Path, model.PreviewImage2Path, model.PreviewImage3Path);
        // 保存完成后记得清理临时文件
        // CleanUpTempFiles(model.PreviewImage1Path, model.PreviewImage2Path, model.PreviewImage3Path);
        return RedirectToAction("UploadSuccess");
    }

    // 返回View，把包含所有预览路径的Model传回去
    return View(model);
}

4. 编写Razor View #

View里只需要一个表单、两个按钮（上传预览+最终保存），关键是用隐藏字段保存已有的预览路径，这样每次提交时会把这些路径回传给Action，确保预览状态不丢失：

@model ImageUploadViewModel

@{
    ViewData["Title"] = "多图预览上传";
}

<h1>多图预览上传</h1>

<form asp-action="UploadImages" enctype="multipart/form-data" method="post">
    <!-- 图片1上传区域 -->
    <div style="margin-bottom: 20px;">
        <label>图片1:</label>
        <input type="file" asp-for="Image1" accept="image/*" />
        @if (!string.IsNullOrEmpty(Model.PreviewImage1Path))
        {
            <div style="margin-top: 10px;">
                <h4>预览图:</h4>
                <img src="@Model.PreviewImage1Path" alt="图片1预览" style="max-width: 200px; max-height: 200px;" />
            </div>
        }
        <!-- 隐藏字段：保存已有的预览路径，提交时回传给Action -->
        <input type="hidden" asp-for="PreviewImage1Path" />
    </div>

    <!-- 图片2上传区域 -->
    <div style="margin-bottom: 20px;">
        <label>图片2:</label>
        <input type="file" asp-for="Image2" accept="image/*" />
        @if (!string.IsNullOrEmpty(Model.PreviewImage2Path))
        {
            <div style="margin-top: 10px;">
                <h4>预览图:</h4>
                <img src="@Model.PreviewImage2Path" alt="图片2预览" style="max-width: 200px; max-height: 200px;" />
            </div>
        }
        <input type="hidden" asp-for="PreviewImage2Path" />
    </div>

    <!-- 图片3上传区域 -->
    <div style="margin-bottom: 20px;">
        <label>图片3:</label>
        <input type="file" asp-for="Image3" accept="image/*" />
        @if (!string.IsNullOrEmpty(Model.PreviewImage3Path))
        {
            <div style="margin-top: 10px;">
                <h4>预览图:</h4>
                <img src="@Model.PreviewImage3Path" alt="图片3预览" style="max-width: 200px; max-height: 200px;" />
            </div>
        }
        <input type="hidden" asp-for="PreviewImage3Path" />
    </div>

    <!-- 按钮区域：只留两个按钮，满足减少按钮的需求 -->
    <div>
        <button type="submit">上传预览</button>
        <button type="submit" name="SaveToDb" value="true" style="margin-left: 15px;">保存到数据库</button>
    </div>
</form>

5. 几个重要提醒 #

• 定时清理临时文件：一定要给TempUploads文件夹加定时清理逻辑，比如写个后台任务或者脚本，不然服务器空间会被占满。
• 权限设置：确保应用程序对TempUploads文件夹有读写权限，不然会上传失败。
• 文件大小限制：如果需要限制上传文件的大小，要在配置文件里设置（.NET Core在Program.cs，.NET Framework在web.config）。

这样处理后，不管用户上传哪张图片，之前的预览状态都会通过隐藏字段回传给Action，三张图片的预览都能保留，而且只需要两个按钮，完全符合你的需求！

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