如何在数据处理时显示Spinner加载动画 Ajax提交IFormFile方案

你选的Ajax提交FormData的方案是当前场景的最优实现，相比原生表单POST，能无刷新控制加载状态、处理返回结果、捕获异常，完全适配你用EPPlus处理IFormFile的后端逻辑。
你现有代码存在几个会导致功能失效的问题：

• 未拦截表单原生提交事件，点击按钮会直接走整页POST，不会执行Ajax逻辑
• FormData的文件字段名和后端参数名大小写不匹配，后端无法接收文件
• 未携带防伪令牌，后端的[ValidateAntiForgeryToken]校验会直接返回400错误
• 未编写Spinner加载层的显示/隐藏控制逻辑
• 未做重复提交拦截，用户多次点按钮会重复发起请求

修正后完整代码 #

HTML部分 #

保留原有加载层结构，拦截表单默认提交事件即可，不需要额外修改原生form属性：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="uploadForm" enctype="multipart/form-data">
  @Html.AntiForgeryToken()
  <div class="custom-file">
    <input type="file" class="custom-file-input" name="InputFile" accept=".xlsx,.xls" />
  </div>
  <button type="submit" id="uploadBtn" class="btn btn-info">Upload</button>
  <div id="load" style="display:none">
    <img src="~/custom/loading.gif" width="500" height="500">                   
  </div>
</form>

JavaScript部分 #

绑定表单提交事件，拦截默认行为，统一控制加载状态：

$('#uploadForm').on('submit', function(e) {
  // 阻止原生表单整页提交
  e.preventDefault();

  // 前置校验：判断是否选中文件
  const fileInput = $('.custom-file-input')[0];
  if (!fileInput.files || fileInput.files.length === 0) {
    alert('请先选择要上传的Excel文件');
    return;
  }

  // 组装FormData，字段名必须和后端参数名完全一致才能正常绑定
  const formData = new FormData();
  formData.append('InputFile', fileInput.files[0]);
  // 携带防伪令牌，通过后端校验
  formData.append('__RequestVerificationToken', $('input[name="__RequestVerificationToken"]').val());

  const uploadUrl = '@Url.Action("Upload", "Exposure")';

  // 请求发起前显示加载层，禁用上传按钮防止重复提交
  $('#load').show();
  $('#uploadBtn').prop('disabled', true);

  $.ajax({
    url: uploadUrl,
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (result) {
      if (result.success) {
        alert('上传处理成功');
        // 编写成功后的业务逻辑，比如刷新列表、清空文件选择框等
      } else {
        alert('上传失败：' + result.msg);
      }
    },
    error: function (jqXHR) {
      alert('网络请求异常，请稍后重试');
    },
    complete: function () {
      // 无论请求成功/失败，结束后都隐藏加载层，恢复按钮可点击状态
      $('#load').hide();
      $('#uploadBtn').prop('disabled', false);
    }
  });
});

后端部分 #

调整返回值为Json格式方便前端处理，增加异常捕获避免服务端报错直接返回500：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Upload(IFormFile InputFile)
{
  try
  {
    if (InputFile == null || InputFile.Length == 0)
    {
      return Json(new { success = false, msg = "未接收到有效上传文件" });
    }
    // 保留原有EPPlus解析、数据处理的业务逻辑
    // ... 业务代码
    return Json(new { success = true, msg = "文件处理完成" });
  }
  catch (Exception ex)
  {
    return Json(new { success = false, msg = ex.Message });
  }
}

可选优化点 #

• 增加前端前置校验：选文件后提前判断文件后缀、大小，不符合规则直接提示，减少无效请求
• 增加上传进度展示：如果上传的Excel文件较大，可以通过XMLHttpRequest.upload.onprogress事件监听实时上传进度，替换静态Spinner提升交互体验
• 配置请求大小限制：在服务端配置Kestrel/IIS的最大请求体长度，避免大文件上传返回413错误
• 注意组件授权：5.0及以上版本EPPlus采用非MIT开源协议，商用需要付费授权，非商用可以用4.x版本，或者替换为ClosedXML、NPOI等完全免费的Excel处理组件

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