当前位置：首页 > news >正文

监听下载上传进度

news 2025/7/9 18:46:56

在Web开发中，监听文件的上传和下载进度是提升用户体验的重要功能。通过使用现代浏览器的API，我们可以轻松实现这个功能。以下是关于如何监听上传和下载进度的详细说明。

1. 监听文件上传进度

对于文件上传，通常使用XMLHttpRequest（XHR）或Fetch API。以下是如何通过这两种方法监听上传进度的示例。

使用 XMLHttpRequest

function uploadFile(file) {const xhr = new XMLHttpRequest();// 监听上传进度xhr.upload.addEventListener("progress", function(event) {if (event.lengthComputable) {const percentComplete = (event.loaded / event.total) * 100;console.log(`Upload progress: ${percentComplete.toFixed(2)}%`);// 这里可以更新进度条等UI元素}}, false);// 处理请求完成的事件xhr.onload = function() {if (xhr.status === 200) {console.log('Upload successful:', xhr.responseText);} else {console.error('Upload failed:', xhr.statusText);}};// 处理请求错误的事件xhr.onerror = function() {console.error('An error occurred during the upload');};// 发送请求xhr.open('POST', '/upload', true);const formData = new FormData();formData.append('file', file);xhr.send(formData);
}

使用 Fetch API

虽然Fetch API不直接支持上传进度，但我们可以通过组合使用ReadableStream来实现。以下是一个示例：

async function uploadFile(file) {const response = await fetch('/upload', {method: 'POST',body: file});// 不支持直接获取进度if (!response.ok) {console.error('Upload failed:', response.statusText);return;}console.log('Upload successful:', await response.text());
}

在Fetch API中，我们需要借助其他手段来实现进度监控。Fetch并不提供内建的进度监听能力，因此更常用的还是XMLHttpRequest。

2. 监听文件下载进度

文件下载进度的监听同样可以通过XMLHttpRequest来实现。以下是如何实现下载进度监听的示例。

function downloadFile(url) {const xhr = new XMLHttpRequest();// 监听下载进度xhr.addEventListener("progress", function(event) {if (event.lengthComputable) {const percentComplete = (event.loaded / event.total) * 100;console.log(`Download progress: ${percentComplete.toFixed(2)}%`);// 这里可以更新进度条等UI元素}}, false);// 处理下载完成的事件xhr.onload = function() {if (xhr.status === 200) {console.log('Download successful');const blob = new Blob([xhr.response], { type: 'application/octet-stream' });const link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = 'downloaded_file'; // 自定义文件名link.click();} else {console.error('Download failed:', xhr.statusText);}};// 设置响应类型为blob以便下载xhr.responseType = 'blob';xhr.open('GET', url, true);xhr.send();
}// 使用示例
downloadFile('/path/to/file');