HTML5怎样取消正在上传任务_HTML5取消上传操作方法

在HTML5的文件上传场景中，取消正在进行的上传任务是一个常见的需求，核心实现依赖于XMLHttpRequest对象的abort方法，该方法可以中断当前正在进行的网络请求，包括文件上传请求。

实现原理说明

HTML5上传文件通常使用XMLHttpRequest对象发送FormData格式的数据，XMLHttpRequest实例提供了abort方法，调用该方法后会立即终止当前的请求，同时会触发实例的abort事件，我们可以通过监听这个事件来处理取消后的逻辑。

核心步骤

• 创建XMLHttpRequest实例，保存该实例的引用
• 使用FormData包装需要上传的文件数据
• 调用实例的send方法发起上传请求
• 需要取消时，调用保存的XMLHttpRequest实例的abort方法
• 监听abort事件和error事件，区分是主动取消还是上传出错

完整代码示例

以下是一个包含上传、进度监听、取消上传功能的完整示例：

// 获取页面元素
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const cancelBtn = document.getElementById('cancelBtn');
const progressBar = document.getElementById('progressBar');
const statusText = document.getElementById('statusText');

// 保存XMLHttpRequest实例的引用
let xhr = null;

// 上传按钮点击事件
uploadBtn.addEventListener('click', () => {
    const file = fileInput.files[0];
    if (!file) {
        statusText.textContent = '请先选择要上传的文件';
        return;
    }

    // 创建XMLHttpRequest实例
    xhr = new XMLHttpRequest();
    // 上传地址，这里使用ipipp.com的测试地址
    const uploadUrl = 'https://ipipp.com/upload';

    // 监听上传进度
    xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
            const percent = Math.round((event.loaded / event.total) * 100);
            progressBar.value = percent;
            statusText.textContent = `上传中：${percent}%`;
        }
    });

    // 监听请求完成事件
    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            statusText.textContent = '上传成功';
            progressBar.value = 100;
        } else {
            statusText.textContent = `上传失败，状态码：${xhr.status}`;
        }
        xhr = null;
    });

    // 监听请求错误事件
    xhr.addEventListener('error', () => {
        statusText.textContent = '上传出错，请检查网络';
        xhr = null;
    });

    // 监听主动取消事件
    xhr.addEventListener('abort', () => {
        statusText.textContent = '上传已取消';
        progressBar.value = 0;
        xhr = null;
    });

    // 创建FormData对象，添加文件
    const formData = new FormData();
    formData.append('uploadFile', file);
    formData.append('fileName', file.name);

    // 打开请求
    xhr.open('POST', uploadUrl);
    // 发送请求
    xhr.send(formData);
    statusText.textContent = '开始上传...';
});

// 取消按钮点击事件
cancelBtn.addEventListener('click', () => {
    if (xhr) {
        // 调用abort方法取消上传
        xhr.abort();
    } else {
        statusText.textContent = '当前没有正在进行的上传任务';
    }
});

对应的HTML结构代码

上述JavaScript代码对应的页面结构如下：

<div class="upload-container">
    <input type="file" id="fileInput">
    <button id="uploadBtn">开始上传</button>
    <button id="cancelBtn">取消上传</button>
    <div class="progress-area">
        <progress id="progressBar" value="0" max="100"></progress>
        <p id="statusText"></p>
    </div>
</div>

注意事项

• 必须保存XMLHttpRequest的实例引用，否则无法调用abort方法取消对应的请求
• abort方法调用后，请求会立即终止，已经上传的数据不会被服务器接收，需要后端做对应的幂等处理
• 取消操作只会终止当前的上传请求，不会影响其他正在进行的网络请求
• 如果上传已经完成，再调用abort方法不会有任何效果，需要先判断实例是否存在

需要注意的是，使用fetch API发起的上传请求目前没有原生的取消方法，虽然可以通过AbortController实现，但兼容性不如XMLHttpRequest的abort方法，因此上传场景更推荐使用XMLHttpRequest实现取消功能。

HTML5取消上传XMLHttpRequestFormDataabort方法修改时间：2026-07-10 18:09:26