如何取消/终止jQuery AJAX文件上传？模态框取消按钮失效问题

我帮你分析下，你遇到的问题大概率是没有正确保存Ajax请求的jqXHR对象，导致调用abort()时找不到对应的请求实例。下面给你一套贴合你场景的可行解决方案：

核心思路 #

1. 提前声明变量保存Ajax请求的实例（jQuery 1.10.2中$.ajax()返回的jqXHR对象封装了原生xhr，支持abort()方法）
2. 在取消按钮的点击事件中，先检查请求是否处于未完成状态，再调用abort()终止请求
3. 处理终止后的回调逻辑，避免把主动取消误判为上传错误

完整代码示例 #

$(function () {
  $('#showonlyvalue-portvid').hide();
  // 声明变量存储上传请求的jqXHR实例
  let uploadRequest = null;

  $('#btnuploadvideo').click(function() {
    // 构建FormData（适配文件上传的格式要求）
    const formData = new FormData();
    formData.append('video', $('#your-video-input')[0].files[0]);

    // 发起上传请求，把返回的jqXHR实例存起来
    uploadRequest = $.ajax({
      url: '你的服务器上传接口地址',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      // 自定义xhr监听进度条（保留你原有的进度条逻辑）
      xhr: function() {
        const xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
          xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
              const percent = Math.round((e.loaded / e.total) * 100);
              // 更新进度条显示
              $('#upload-progress-bar').css('width', `${percent}%`).text(`${percent}%`);
            }
          }, false);
        }
        return xhr;
      },
      success: function(res) {
        // 上传成功后的业务逻辑
        $('#showonlyvalue-portvid').show();
        // 重置请求实例
        uploadRequest = null;
      },
      error: function(xhr, status) {
        // 区分主动取消和真实上传错误
        if (status === 'abort') {
          console.log('上传已主动取消');
        } else {
          console.log('上传失败:', xhr.responseText);
        }
        // 重置请求实例
        uploadRequest = null;
      }
    });
  });

  // 取消按钮的点击事件处理
  $('#cancel-upload-btn').click(function() {
    // 检查请求是否存在且未完成
    if (uploadRequest && uploadRequest.readyState !== 4) {
      // 终止上传请求
      uploadRequest.abort();
      console.log('已终止上传流程');
    }
    // 关闭模态框
    $('#your-upload-modal').hide();
    // 重置进度条状态
    $('#upload-progress-bar').css('width', '0%').text('0%');
    // 重置请求实例
    uploadRequest = null;
  });
});

关键细节说明 #

• 为什么之前的xhr.abort()无效？：如果你的代码中没有正确保存jqXHR实例，或者保存的不是$.ajax()返回的对象，调用abort()时自然找不到对应的请求。jQuery返回的jqXHR对象已经封装了原生xhr的终止方法，直接调用即可。
• 终止后的回调处理：调用abort()后，Ajax的error回调会触发，此时status参数为'abort'，你可以通过这个标识来做针对性提示，避免混淆用户。
• 服务器端补充建议：前端终止请求后，服务器可能已经接收到部分文件数据，建议在服务端增加逻辑，检查请求是否被中断，及时清理未完成的文件片段，避免存储空间浪费。

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