当前位置：首页 > JavaScript

js实现多文件自动上传

2026-04-05 03:28:05JavaScript

实现多文件自动上传的 JavaScript 方法

使用 HTML5 的 File API 和 FormData 对象可以实现多文件自动上传。以下是一个完整的实现方案。

HTML 部分

创建一个文件选择输入框和一个上传按钮：

js实现多文件自动上传

<input type="file" id="fileInput" multiple>
<button id="uploadButton">上传文件</button>
<div id="progressContainer"></div>

JavaScript 部分

监听文件选择并实现自动上传逻辑：

js实现多文件自动上传

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const files = fileInput.files;

    if (files.length === 0) {
        alert('请选择至少一个文件');
        return;
    }

    uploadFiles(files);
});

function uploadFiles(files) {
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
    }

    const xhr = new XMLHttpRequest();

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

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            const percentComplete = Math.round((e.loaded / e.total) * 100);
            document.getElementById('progressContainer').innerHTML = 
                `上传进度: ${percentComplete}%`;
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('文件上传成功');
        } else {
            alert('文件上传失败');
        }
    };

    xhr.send(formData);
}

使用 Fetch API 的现代实现

async function uploadFiles(files) {
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
    }

    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            const result = await response.json();
            console.log('上传成功', result);
        } else {
            throw new Error('上传失败');
        }
    } catch (error) {
        console.error('上传错误:', error);
    }
}

拖放上传实现

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropArea.classList.add('dragover');
});

dropArea.addEventListener('dragleave', () => {
    dropArea.classList.remove('dragover');
});

dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.classList.remove('dragover');
    const files = e.dataTransfer.files;
    uploadFiles(files);
});

服务器端处理示例 (Node.js Express)

const express = require('express');
const multer = require('multer');
const app = express();

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

app.post('/upload', upload.array('files[]'), (req, res) => {
    res.json({ message: '文件上传成功', files: req.files });
});

app.listen(3000, () => console.log('服务器运行中'));

进度条改进

使用更详细的进度显示：

function createProgressBar(fileName) {
    const container = document.getElementById('progressContainer');
    const progressDiv = document.createElement('div');
    progressDiv.innerHTML = `
        <p>${fileName}</p>
        <progress value="0" max="100"></progress>
        <span class="percent">0%</span>
    `;
    container.appendChild(progressDiv);
    return progressDiv.querySelector('progress');
}

并发上传控制

限制同时上传的文件数量：

async function uploadWithConcurrency(files, maxConcurrent = 3) {
    const queue = [...files];
    const inProgress = new Set();
    const results = [];

    while (queue.length > 0 || inProgress.size > 0) {
        while (inProgress.size < maxConcurrent && queue.length > 0) {
            const file = queue.shift();
            const promise = uploadFile(file)
                .then(result => {
                    inProgress.delete(promise);
                    results.push(result);
                });
            inProgress.add(promise);
        }
        await Promise.race([...inProgress]);
    }

    return results;
}

这些方法提供了从基础到高级的多文件上传实现方案，可以根据具体需求选择合适的实现方式。