正文

学会在JavaScript中优雅地取消文件上传

/0 浏览量
1103

在处理文件上传时，有时候我们可能需要取消正在进行的上传，比如用户选择了错误的文件或者上传速度过慢。在JavaScript中，我们可以通过几种方法来实现这一功能。本文将详细介绍如何在JavaScript中优雅地取消文件上传。

1. 使用HTML5的XMLHttpRequest对象

HTML5的XMLHttpRequest对象提供了abort()方法，可以用来取消一个正在进行的请求。以下是一个使用XMLHttpRequest对象进行文件上传并取消上传的示例：

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 创建一个新的 FormData 对象
var formData = new FormData();
formData.append('file', document.getElementById('fileInput').files[0]);

// 配置请求类型、URL以及发送FormData对象
xhr.open('POST', '/upload', true);
xhr.send(formData);

// 监听上传进度
xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        console.log('Upload progress: ' + percentComplete + '%');
    }
};

// 监听请求完成事件
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('Upload complete.');
    } else {
        console.error('An error occurred during the upload.');
    }
};

// 取消上传
function cancelUpload() {
    xhr.abort();
    console.log('Upload has been cancelled.');
}

在上面的代码中，我们首先创建了一个XMLHttpRequest对象，并通过open()方法配置了请求。然后，我们使用send()方法发送了包含文件的FormData对象。我们还监听了上传进度和请求完成事件。

如果需要取消上传，可以调用abort()方法，并传递一个可选的字符串作为原因。在上面的示例中，我们通过一个名为cancelUpload的函数来调用abort()方法。

2. 使用fetch API

fetch API 提供了一个更现代的方式来处理网络请求。以下是一个使用fetch API进行文件上传并取消上传的示例：

// 获取文件输入元素
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

// 创建一个 FormData 对象
var formData = new FormData();
formData.append('file', file);

// 使用 fetch API 发送文件
var upload = fetch('/upload', {
    method: 'POST',
    body: formData
});

// 监听上传进度
upload.onprogress = function(event) {
    if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        console.log('Upload progress: ' + percentComplete + '%');
    }
};

// 监听请求完成事件
upload.then(function(response) {
    if (response.ok) {
        console.log('Upload complete.');
    } else {
        console.error('An error occurred during the upload.');
    }
});

// 取消上传
function cancelUpload() {
    upload.abort();
    console.log('Upload has been cancelled.');
}

在上面的代码中，我们使用fetch API发送了文件。我们同样监听了上传进度和请求完成事件。要取消上传，可以调用abort()方法。

总结

通过以上两种方法，我们可以在JavaScript中优雅地取消文件上传。在实际应用中，可以根据需求选择合适的方法来实现这一功能。

-- 展开阅读全文 --