当前位置：首页 > JavaScript

js实现多张

2026-03-14 06:52:30JavaScript

实现多张图片上传的JavaScript方法

使用HTML5的File API和FormData对象可以实现多张图片上传功能。以下是一个完整的实现方案：

HTML部分

创建包含文件输入框和上传按钮的HTML结构：

<input type="file" id="fileInput" multiple accept="image/*">
<button id="uploadBtn">上传图片</button>
<div id="preview"></div>

JavaScript部分

document.getElementById('uploadBtn').addEventListener('click', function() {
    const files = document.getElementById('fileInput').files;
    if (files.length === 0) {
        alert('请选择至少一张图片');
        return;
    }

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

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功', data);
    })
    .catch(error => {
        console.error('上传失败', error);
    });
});

// 图片预览功能
document.getElementById('fileInput').addEventListener('change', function(e) {
    const preview = document.getElementById('preview');
    preview.innerHTML = '';

    const files = e.target.files;
    for (let i = 0; i < files.length; i++) {
        const reader = new FileReader();
        reader.onload = function(event) {
            const img = document.createElement('img');
            img.src = event.target.result;
            img.style.height = '100px';
            img.style.margin = '5px';
            preview.appendChild(img);
        };
        reader.readAsDataURL(files[i]);
    }
});

服务器端处理

Node.js Express示例：

js实现多张

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

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

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

app.listen(3000);

优化上传体验的附加功能

文件大小和类型验证

const MAX_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif'];

function validateFiles(files) {
    for (let file of files) {
        if (file.size > MAX_SIZE) {
            return { valid: false, message: `${file.name}超过大小限制` };
        }
        if (!ALLOWED_TYPES.includes(file.type)) {
            return { valid: false, message: `${file.name}格式不支持` };
        }
    }
    return { valid: true };
}

进度显示

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
}, false);

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

拖放上传实现

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
    拖放图片到这里
</div>

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

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, highlight, false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, unhighlight, false);
});

function highlight() {
    dropArea.style.borderColor = 'blue';
}

function unhighlight() {
    dropArea.style.borderColor = '#ccc';
}

dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    document.getElementById('fileInput').files = files;
    // 触发change事件
    const event = new Event('change');
    document.getElementById('fileInput').dispatchEvent(event);
}