js实现多文件自动上传

2026-01-31 11:21:01JavaScript

实现多文件自动上传的步骤

使用HTML5的<input type="file">元素配合JavaScript的FormData对象可以实现多文件自动上传功能。以下是具体实现方法：

HTML部分

创建文件输入元素，设置multiple属性允许选择多个文件：

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

JavaScript部分

监听文件选择并处理上传逻辑：

document.getElementById('uploadButton').addEventListener('click', function() {
    const files = document.getElementById('fileInput').files;
    if (files.length === 0) {
        alert('请先选择文件');
        return;
    }

    uploadFiles(files);
});

function uploadFiles(files) {
    const progressContainer = document.getElementById('progressContainer');
    progressContainer.innerHTML = '';

    Array.from(files).forEach(file => {
        const formData = new FormData();
        formData.append('file', file);

        const progressDiv = document.createElement('div');
        progressDiv.textContent = `上传 ${file.name}: 0%`;
        progressContainer.appendChild(progressDiv);

        const xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload', true);

        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                const percent = Math.round((e.loaded / e.total) * 100);
                progressDiv.textContent = `上传 ${file.name}: ${percent}%`;
            }
        };

        xhr.onload = function() {
            if (xhr.status === 200) {
                progressDiv.textContent = `上传 ${file.name}: 完成`;
            } else {
                progressDiv.textContent = `上传 ${file.name}: 失败`;
            }
        };

        xhr.send(formData);
    });
}

服务器端处理

Node.js Express示例处理上传请求：

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

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
    res.status(200).send('文件上传成功');
});

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

高级功能扩展

添加拖放上传支持：

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

添加并发控制和错误处理：

function uploadFiles(files, maxConcurrent = 3) {
    let activeUploads = 0;
    let queue = [...files];

    function processQueue() {
        if (queue.length === 0 || activeUploads >= maxConcurrent) return;

        activeUploads++;
        const file = queue.shift();
        // 上传逻辑...

        xhr.onload = xhr.onerror = function() {
            activeUploads--;
            processQueue();
        };
    }

    // 初始化并发上传
    for (let i = 0; i < Math.min(maxConcurrent, files.length); i++) {
        processQueue();
    }
}

以上代码实现了多文件选择、进度显示、拖放上传和并发控制等功能。根据实际需求可以进一步扩展错误处理、文件类型验证等功能。

js实现多文件自动上传