.NET Core Ajax POST模态框表单文件上传为空问题修复

问题特征 #

• 直接访问view.cshtml页面提交表单时，图片上传功能运行正常
• 通过弹窗模态框使用Ajax提交表单时，后端始终无法接收到上传的图片值，触发* validate required必填项校验错误，功能失效

分步修复方案 #

1. 修正表单DOM结构与基础属性 #

绝大多数模态框提交失效的核心原因是表单结构被UI框架破坏：Bootstrap等常见UI组件库会默认把模态框DOM移动到<body>标签尾部，如果<form>标签放在模态框外侧、仅把表单项放在模态框内部，模态框移位后文件输入框会脱离表单容器，FormData序列化时无法抓取到文件内容。
请按以下要求调整表单：

• 将整个<form>标签完整放在模态框的.modal-content容器内部，不要跨模态框层级放置
• 表单必须添加enctype="multipart/form-data"属性，同时保留method="post"和防伪造令牌@Html.AntiForgeryToken()
• 文件输入框的name属性必须和ViewModel中图片字段名一致，也就是name="Project_Photo"

正确表单结构示例：

<div class="modal fade" id="form-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 整个form必须放在modal-content内部 -->
      <form asp-action="Create" asp-controller="Dashboard_Protoflio" asp-area="Dashboards" 
            method="post" enctype="multipart/form-data" onsubmit="return jQueryAjaxPost(this);">
        @Html.AntiForgeryToken()
        <div class="modal-header">
          <h5 class="modal-title">新增作品集</h5>
        </div>
        <div class="modal-body">
          <!-- 其他表单项省略 -->
          <input type="file" name="Project_Photo" class="form-control" accept=".png,.jpg,.jpeg" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

注意：如果调试阶段控制台打印的文件列表是空数组，100%是表单DOM结构问题，优先检查文件输入框是否在form标签内部、form标签是否被模态框移位脱离了父级。

2. 调整后端校验逻辑顺序 #

原有后端代码存在逻辑顺序问题：先判断ModelState.IsValid，再读取上传文件。如果PortfolioVm的Project_Photo字段标记了[Required]特性，模型绑定阶段因为没拿到文件会直接标记校验失败，根本不会走到后续读取Request.Form.Files的逻辑，直接返回必填校验错误。
调整校验顺序，先处理文件上传校验，最后统一判断模型状态，顺便修正原有代码中cannot br的拼写错误：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(PortfolioVm model)
{
    // 第一步：先读取上传文件集合做校验
    var files = Request.Form.Files;
    var poster = files.FirstOrDefault();

    if (poster == null)
    {
        ModelState.AddModelError("Project_Photo", "Please select project image!");
    }
    else if (!_allowedExtenstions.Contains(Path.GetExtension(poster.FileName).ToLower()))
    {
        ModelState.AddModelError("Project_Photo", "Only .PNG, .JPG Images are allowed");
    }
    else if (poster.Length > maxAllowedPosterSize)
    {
        ModelState.AddModelError("Project_Photo", "Image cannot be more than 1 MB!");
    }
    else
    {
        // 所有文件校验通过后再写入内存流
        using var datastream = new MemoryStream();
        await poster.CopyToAsync(datastream);
        model.Project_Photo = datastream.ToArray();
    }

    // 第二步：统一判断模型校验状态
    if (!ModelState.IsValid)
    {
        var catgportfolioModel = mapper.Map<IEnumerable<Category_PortoflioVm>>(category_Portoflio.Get());
        ViewBag.catgportfolio = new SelectList(catgportfolioModel, "Id", "Category_Name");
        return Json(new { isValid = false, html = Helper.RenderRazorViewToString(this, "Create", model) });
    }

    // 第三步：校验通过执行新增逻辑
    var obj = mapper.Map<Portfolio>(model);
    portoflio.Create(obj);
    toastNotification.AddSuccessToastMessage("Portoflio item Created successfully");
    return Json(new { isValid = true, newUrl = Url.Action("Index", "Dashboard_Protoflio", new { Area = "Dashboards" }) });
}

3. 补全Ajax提交逻辑的边界处理 #

原有Ajax逻辑存在两个小问题：一是局部刷新模态框内容后没有重新绑定表单提交事件，会导致第二次打开模态框提交失效；二是跳转和模态框关闭的顺序有冲突，容易出现DOM操作异常。调整后代码如下：

const jQueryAjaxPost = form => {
    try {
        // 调试阶段可打开下面两行控制台打印，确认FormData是否正确抓取到文件，正式上线可删除
        // const formData = new FormData(form);
        // console.log('抓取到的上传文件：', formData.getAll('Project_Photo'));

        $.ajax({
            type: 'POST',
            url: form.action,
            data: new FormData(form),
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.isValid) {
                    $('#form-modal .modal-body').html('');
                    $('#form-modal .modal-title').html('');
                    $('#form-modal').modal('hide');
                    // 等模态框完全关闭后再做页面跳转，避免DOM冲突
                    $('#form-modal').one('hidden.bs.modal', () => window.location.replace(res.newUrl));
                } else {
                    $('#form-modal .modal-body').html(res.html);
                    // 局部刷新内容后重新绑定表单提交事件，避免提交失效
                    $('#form-modal form').on('submit', function () {
                        return jQueryAjaxPost(this);
                    })
                }
            },
            error: function (err) {
                console.log('提交异常：', err)
            }
        })
        // 阻止默认表单提交行为
        return false;
    } catch (ex) {
        console.log('提交逻辑异常：', ex)
    }
}

4. 其他排查点 #

如果以上步骤调整后仍有问题，逐一核对以下场景：

• 动态加载表单内容到模态框时，要等内容完全渲染完成后再绑定提交事件，不要在DOM未加载完成时提前绑定
• 如果使用了第三方图片上传组件，要确认组件选中文件后确实把文件同步到了原生<input type="file">节点，否则FormData无法抓取到文件
• 模态框弹出时不要额外执行表单重置逻辑，避免用户选中的文件被清空

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