监听下载上传进度

在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');

3. 总结

• 文件上传：可以使用XMLHttpRequest的upload事件来监听上传进度，而Fetch API不直接支持上传进度监听。
• 文件下载：可以使用XMLHttpRequest的progress事件来监听下载进度。

通过实现这些功能，用户在上传和下载文件时可以获得更加直观的反馈，从而提升整体用户体验。你可以根据实际情况调整进度反馈的方式，比如更新进度条、提示信息等。