ASP.NET Core 表单提交上传文件时叠加进度条不刷新求助

问题背景 #

• 已开发完成带文件上传表单的简易网页，所有基础上传功能运行正常
• 需求是实现带叠加层（overlay）效果的上传进度条，当前核心问题是进度条无法随上传过程实时刷新
• 曾尝试参考ASP.NET Core场景下基于Session统计服务端上传进度的实现方案，由于自身场景没有使用AJAX提交，方案无法适配，需要匹配现有实现的正确开发方向

当前使用的提交处理代码 #

$("#uploader-form").on("submit", function (e) {
    e.preventDefault();
    showPopup();

    this.addEventListener("formdata", function (event) {
        var uploader = $("#file-uploader").dxFileUploader('instance');
        event.formData.set("MyFiles", null); // dxFileUploader的"Name"配置值
        for (var i = 0; i < uploader._files.length; i++) {
            event.formData.append("File" + i.toString(), uploader._files[i].value);
        }
    });
  
    this.submit();
  
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            refreshProgressBar(evt.total, evt.loaded);
        }
    }, false);  
});

现有运行表现 #

• 上传进度条弹窗可正常弹出
• 文件可按预期完成上传流程
• 已绑定progress事件监听的XMLHttpRequest从未触发回调，进度条全程无更新

核心问题根因 #

当前代码存在两处关键逻辑错位，直接导致进度监听失效：

• 执行this.submit()后，浏览器会走原生表单的同步导航提交流程，和代码后续单独实例化的xhr对象完全没有关联，这个新建的XHR根本没有承载实际的上传请求，自然永远不会触发upload的progress事件
• 事件绑定的执行顺序完全颠倒：先触发了原生提交动作，再去给独立的XHR实例绑定进度监听，哪怕这个XHR后续用来发请求，绑定时机已经晚于请求发起时刻，收不到过程回调

正确实现方向 #

浏览器规范层面，原生表单的同步导航提交没有提供可监听上传过程进度的API。要拿到实时上传进度，必须依托XMLHttpRequest、Fetch这类支持异步请求监听的接口发送上传请求，无法在完全保留原生同步提交的前提下实现进度条刷新。
具体调整步骤：

• 移除代码中原生this.submit()的调用，把之前在formdata事件里组装的表单内容，手动实例化为FormData对象存储上传文件数据
• 按照正确顺序执行流程：先初始化XHR实例 → 绑定upload阶段的progress事件回调，拿到已上传、总大小数据后更新进度条 → 配置请求方法、后端接收接口地址 → 将组装好的FormData作为请求体发送上传请求
• 等XHR收到上传成功、上传失败的响应回调后，再执行后续的结果提示、页面跳转逻辑，替代原来原生表单提交带来的页面跳转效果

内容的提问来源于stack exchange，提问作者David Bašta