js实现多张

js实现多张图片上传

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

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

document.getElementById('uploadBtn').addEventListener('click', function() {
    const fileInput = document.getElementById('fileInput');
    const files = 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 = '';

    Array.from(e.target.files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(event) {
            const img = document.createElement('img');
            img.src = event.target.result;
            img.style.height = '100px';
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    });
});

服务器端处理(Node.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({ success: true, files: req.files });
});

app.listen(3000);

进度显示实现

使用XMLHttpRequest可以显示上传进度：

function uploadWithProgress(files) {
    const xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function(e) {
        if(e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            console.log(percent + '%');
        }
    };

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

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

    xhr.send(formData);
}

图片压缩处理

在上传前可以使用canvas压缩图片：

function compressImage(file, quality = 0.7) {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = function(event) {
            const img = new Image();
            img.onload = function() {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                canvas.toBlob(resolve, 'image/jpeg', quality);
            };
            img.src = event.target.result;
        };
        reader.readAsDataURL(file);
    });
}