如何在jQuery Ajax与ASP.NET Core中实现带进度条的Excel文件上传

一、前端实现（jQuery + Bootstrap进度条） #

结合你提供的进度条HTML，补充完整的文件选择、上传逻辑：

1. HTML结构 #

<input type="file" id="excelFile" accept=".xlsx,.xls" />
<div class="progress mt-3">
  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
       aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>
</div>
<button id="uploadBtn" class="btn btn-primary mt-2">上传Excel</button>

2. jQuery Ajax上传逻辑 #

核心是利用XMLHttpRequest的upload.progress事件实时更新进度条，同时通过FormData传递文件：

$(document).ready(function() {
  $('#uploadBtn').click(function() {
    const file = $('#excelFile')[0].files[0];
    if (!file) {
      alert('请先选择要上传的Excel文件');
      return;
    }

    const formData = new FormData();
    formData.append('excelFile', file);

    $.ajax({
      url: '/Home/UploadExcel',
      type: 'POST',
      data: formData,
      // 必须禁用这两个选项，否则FormData会被错误处理
      processData: false,
      contentType: false,
      // 自定义XHR对象监听上传进度
      xhr: function() {
        const xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(e) {
          if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            $('.progress-bar')
              .width(percent.toFixed(2) + '%')
              .text(percent.toFixed(2) + '%');
          }
        }, false);
        return xhr;
      },
      success: function(res) {
        alert(res.message);
        // 重置进度条
        $('.progress-bar').width('0%').text('0%');
      },
      error: function() {
        alert('上传失败，请重试');
        $('.progress-bar').width('0%').text('0%');
      }
    });
  });
});

二、后端实现（ASP.NET Core） #

你原有的PassData方法是接收JSON数据，需要调整为接收文件并解析Excel，再复用业务逻辑：

1. 准备工作 #

首先安装Excel解析库（以EPPlus为例，非商用免费）：

Install-Package EPPlus

在Program.cs中配置EPPlus许可：

builder.Services.AddSingleton(new ExcelPackage.LicenseContext(ExcelPackage.LicenseContext.NonCommercial));

2. 控制器完整代码 #

using OfficeOpenXml;
using Microsoft.AspNetCore.Http;

public class HomeController : Controller
{
    [HttpPost]
    public async Task<IActionResult> UploadExcel(IFormFile excelFile)
    {
        // 验证文件有效性
        if (excelFile == null || excelFile.Length == 0)
        {
            return Json(new { success = false, message = "请选择有效的Excel文件" });
        }

        var allowedExts = new[] { ".xlsx", ".xls" };
        var fileExt = Path.GetExtension(excelFile.FileName).ToLower();
        if (!allowedExts.Contains(fileExt))
        {
            return Json(new { success = false, message = "仅支持.xlsx/.xls格式文件" });
        }

        List<Model> models = new();
        try
        {
            // 解析Excel内容
            using (var package = new ExcelPackage(excelFile.OpenReadStream()))
            {
                var worksheet = package.Workbook.Worksheets.First();
                var rowCount = worksheet.Dimension.Rows;
                
                // 从第2行开始读取（假设第1行是表头）
                for (int row = 2; row <= rowCount; row++)
                {
                    models.Add(new Model
                    {
                        // 根据你的Model字段映射Excel列
                        Name = worksheet.Cells[row, 1].Text,
                        Age = int.TryParse(worksheet.Cells[row, 2].Text, out var age) ? age : 0
                    });
                }
            }

            // 复用原有的数据处理逻辑
            await PassData(models);

            return Json(new { success = true, message = $"成功处理{models.Count}条数据" });
        }
        catch (Exception ex)
        {
            return Json(new { success = false, message = $"处理出错：{ex.Message}" });
        }
    }

    // 保留你原有的业务处理方法
    private async Task PassData(List<Model> models)
    {
        foreach (var item in models)
        {
            // 你的数据迭代/保存逻辑，比如写入数据库
            await Task.Delay(10); // 模拟异步操作
        }
    }
}

// 你的Model类示例
public class Model
{
    public string Name { get; set; }
    public int Age { get; set; }
}

关键注意事项 #

• 前端必须用FormData传递文件，不能用JSON格式，因此要禁用processData和contentType
• 进度条更新依赖XMLHttpRequest的upload.progress事件，jQuery通过xhr配置项自定义XHR对象实现监听
• 后端接收文件用IFormFile类型，解析Excel后再转交给原有业务方法处理
• 务必添加文件类型验证和异常捕获，避免非法文件或解析错误导致崩溃

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