js实现上传进度条

使用XMLHttpRequest实现上传进度条

XMLHttpRequest是传统的AJAX请求方式，支持上传进度监控。通过监听upload对象的progress事件获取上传进度信息。

const xhr = new XMLHttpRequest();
const fileInput = document.getElementById('fileInput');
const progressBar = document.getElementById('progressBar');

fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    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(formData);
});

使用Fetch API实现上传进度条

Fetch API本身不直接支持进度监控，但可以通过ReadableStream和TransformStream实现类似功能。

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

fileInput.addEventListener('change', async function(e) {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    });

    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;

    while(true) {
        const {done, value} = await reader.read();
        if (done) break;

        receivedLength += value.length;
        const percent = Math.round((receivedLength / contentLength) * 100);
        progressBar.style.width = percent + '%';
        progressBar.textContent = percent + '%';
    }
});

使用Axios实现上传进度条

Axios提供了更简洁的进度监控方式，通过onUploadProgress回调函数实现。

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

fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    axios.post('/upload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: function(progressEvent) {
            const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
            progressBar.style.width = percent + '%';
            progressBar.textContent = percent + '%';
        }
    });
});

进度条UI实现

HTML结构可以简单实现为：

<input type="file" id="fileInput">
<div class="progress-container">
    <div id="progressBar" class="progress-bar">0%</div>
</div>

CSS样式示例：

.progress-container {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #4CAF50;
    text-align: center;
    line-height: 20px;
    color: white;
    transition: width 0.3s;
}

注意事项

后端服务器需要正确配置才能支持文件上传和进度监控。Node.js Express示例：

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    res.send('File uploaded successfully');
});

对于大文件上传，建议实现分片上传功能，将大文件分割为多个小块分别上传，提高可靠性和用户体验。