HTML5怎样取消正在上传任务_HTML5取消上传操作方法【操作】_技术教程

XMLHttpRequest.abort()是取消上传的唯一可靠方式；它能立即终止请求、触发onabort事件并重置readyState为0，而fetch()即使配合AbortController也无法撤回已发出的上传体。

XMLHttpRequest.abort() 是取消上传的唯一可靠方式

HTML5 本身没有提供“取消上传”的原生 API，XMLHttpRequest 的 abort() 方法是当前最通用、兼容性最好且真正能中断底层传输的手段。它会立即终止请求，触发 onabort 事件，并将 readyState 设为 0。注意：fetch() 不支持中止上传（即使传入 AbortController，也仅对响应阶段有效，上传体已发出后无法撤回）。

用 XMLHttpRequest 实现可取消的文件上传

关键在于：必须在调用 send() 前保存实例引用，并确保上传过程中用户能触发 abort()。常见疏漏是把 xhr 声明在函数作用域内，导致取消按钮无法访问。

const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', fileInput.files[0]);

xhr.upload.addEventListener('progress', (e) => {
  if (e.lengthComputable) {
    console.log(`上传进度: ${e.loaded}/${e.total}`);
  }
});

xhr.addEventListener('load', () => {
  console.log('上传完成');
});

xhr.addEventListener('error', () => {
  console.log('上传失败');
});

xhr.addEventListener('abort', () => {
  console.log('上传已取消');
});

// 开始上传
xhr.open('POST', '/upload');
xhr.send(formData);

// 取消按钮点击时调用
document.getElementById('cancelBtn').addEventListener('click', () => {
  if (xhr.readyState > 0 && xhr.readyState < 4) {
    xhr.abort();
  }
});

使用 AbortController 时要注意 fetch 的局限性

AbortController 对 fetch() 的上传取消效果有限——它只能中止“等待响应”阶段，一旦浏览器已将文件数据发向服务器（尤其大文件），abort() 不会撤回已发送的字节。服务端仍可能继续处理甚至保存不完整文件。因此生产环境若需强取消语义，应优先选 XMLHttpRequest。

fetch() + AbortController 适合小文件或仅需 UI 层“假装取消”
服务端必须配合实现上传中断检测（如检查连接是否关闭），否则无实际意义
Chrome 120+ 对 fetch 上传中止有小幅改进，但仍未达 XMLHttpRequest.abort() 级别

上传中取消后服务端可能仍在写入

前端调用 abort() 或 abortController.abort() 只影响客户端连接状态，不通知服务端“停止处理”。如果后端使用 Node.js 的 multer、PHP 的 $_FILES 或 Python 的 Flask.request.files，它们通常会在请求结束时才清理临时文件；而某些框架（如 Express 默认）甚至会等整个请求体接收完毕才进入路由逻辑——这意味着你点了取消，服务端可能还在收包。

真正健壮的做法是：