前端如何实现文件上传进度条及大文件分片上传？-前端问答-PHP中文网

前端如何实现文件上传进度条及大文件分片上传？

畫卷琴夢

发布： 2025-04-27 15:57:01

原创

332人浏览过

实现文件上传进度条和大文件分片上传的方法如下：1. 文件上传进度条通过监听xmlhttprequest的upload对象的progress事件实现，实时更新进度条显示。2. 大文件分片上传通过将文件分割成固定大小的块，并逐个上传，确保上传的可靠性和效率。

前端如何实现文件上传进度条及大文件分片上传？

实现文件上传进度条和大文件分片上传是前端开发中常见且重要的功能。让我们深入探讨如何实现这些功能，并分享一些经验和建议。

在前端开发中，文件上传进度条不仅能提高用户体验，还能让用户实时了解文件上传的进度，而大文件分片上传则能有效解决大文件上传时可能遇到的问题，如超时和失败重试。让我们从基础开始，逐步深入。

首先，我们需要了解HTML5中的File API和XMLHttpRequest Level 2的进度事件，这些是实现文件上传进度条的基础。File API允许我们访问本地文件，而XMLHttpRequest Level 2则提供了上传进度的实时反馈。

立即学习“前端免费学习笔记（深入）”；

实现文件上传进度条的关键在于监听XMLHttpRequest的upload对象的progress事件。我们可以使用JavaScript来动态更新进度条的显示。

const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');

fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const xhr = new XMLHttpRequest();

    xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            progressBar.style.width = percent + '%';
            progressBar.textContent = percent + '%';
        }
    });

    xhr.open('POST', '/upload', true);
    xhr.send(file);
});

登录后复制

这个代码片段展示了如何通过监听progress事件来更新进度条。需要注意的是，e.lengthComputable用于确保我们可以计算进度。

当涉及到大文件上传时，分片上传变得尤为重要。分片上传可以将大文件分割成多个小块，然后逐个上传。这样即使某个分片上传失败，也可以单独重试，而不会影响整个文件的上传。

实现分片上传的基本思路是将文件分割成固定大小的块，然后通过循环上传这些块。我们需要在服务器端也做相应的处理，以便能够重组这些分片。

const fileInput = document.getElementById('fileInput');
const chunkSize = 10 * 1024 * 1024; // 10MB

fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const chunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;

    function uploadChunk() {
        const start = currentChunk * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', `/upload?chunk=${currentChunk}&chunks=${chunks}`, true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                currentChunk++;
                if (currentChunk < chunks) {
                    uploadChunk();
                } else {
                    console.log('Upload complete');
                }
            } else {
                console.error('Error uploading chunk');
            }
        };
        xhr.send(chunk);
    }

    uploadChunk();
});

登录后复制

这个代码展示了如何将文件分割成10MB的块，并逐个上传。需要注意的是，服务器需要处理这些分片，并在所有分片上传完成后进行重组。