如何使用HTML5實現多張圖片上傳功能

# 如何使用HTML5實現多張圖片上傳功能

## 前言

在當今的Web開發中，圖片上傳功能已成為大多數網站的標配需求。無論是社交媒體平臺、電子商務網站還是內容管理系統，都需要允許用戶上傳多張圖片。HTML5的出現為這一功能帶來了革命性的改進，通過新的API和技術，開發者可以創建更強大、更用戶友好的圖片上傳體驗。

本文將詳細介紹如何利用HTML5技術實現多張圖片上傳功能，包括前端實現、后端處理以及優化技巧，幫助開發者掌握這一實用技能。

## 一、HTML5文件上傳基礎

### 1.1 input元素的type="file"屬性

HTML5保留了傳統的文件上傳方式，但進行了功能增強：

```html
<!-- 基礎文件上傳 -->
<input type="file" id="fileInput">

<!-- 多文件上傳 -->
<input type="file" id="multiFileInput" multiple>

<!-- 限制文件類型 -->
<input type="file" accept="image/*">

關鍵屬性說明： - multiple：允許選擇多個文件 - accept：限制可選擇的文件類型

1.2 File API介紹

HTML5引入了File API，提供了對用戶選擇文件的訪問能力：

document.getElementById('fileInput').addEventListener('change', function(e) {
    const files = e.target.files; // FileList對象
    for (let i = 0; i < files.length; i++) {
        console.log(files[i].name); // 文件名
        console.log(files[i].size); // 文件大小(字節)
        console.log(files[i].type); // 文件類型
    }
});

二、完整的多圖上傳實現

2.1 前端HTML結構

<div class="upload-container">
    <input type="file" id="imageUpload" multiple accept="image/*" style="display: none;">
    <button id="uploadButton">選擇圖片</button>
    <div id="previewArea"></div>
    <button id="submitButton" disabled>上傳圖片</button>
    <progress id="uploadProgress" value="0" max="100" style="display: none;"></progress>
</div>

2.2 CSS樣式設計

.upload-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#previewArea {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0;
}

.preview-item {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 5px;
    border: 1px solid #eee;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    border: none;
    cursor: pointer;
}

2.3 JavaScript實現邏輯

// 獲取DOM元素
const uploadInput = document.getElementById('imageUpload');
const uploadButton = document.getElementById('uploadButton');
const previewArea = document.getElementById('previewArea');
const submitButton = document.getElementById('submitButton');
const progressBar = document.getElementById('uploadProgress');

// 點擊按鈕觸發文件選擇
uploadButton.addEventListener('click', () => {
    uploadInput.click();
});

// 文件選擇處理
uploadInput.addEventListener('change', handleFileSelect);

function handleFileSelect(e) {
    const files = e.target.files;
    if (!files || files.length === 0) return;
    
    previewArea.innerHTML = '';
    
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        
        // 驗證文件類型
        if (!file.type.match('image.*')) {
            alert('請選擇圖片文件');
            continue;
        }
        
        // 創建預覽
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            
            const img = document.createElement('img');
            img.src = e.target.result;
            
            const removeBtn = document.createElement('button');
            removeBtn.className = 'remove-btn';
            removeBtn.innerHTML = '×';
            removeBtn.addEventListener('click', () => {
                previewItem.remove();
                updateSubmitButtonState();
            });
            
            previewItem.appendChild(img);
            previewItem.appendChild(removeBtn);
            previewArea.appendChild(previewItem);
        };
        reader.readAsDataURL(file);
    }
    
    updateSubmitButtonState();
}

function updateSubmitButtonState() {
    submitButton.disabled = previewArea.children.length === 0;
}

// 上傳處理
submitButton.addEventListener('click', uploadFiles);

async function uploadFiles() {
    const files = uploadInput.files;
    if (!files || files.length === 0) return;
    
    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
        formData.append('images[]', files[i]);
    }
    
    progressBar.style.display = 'block';
    
    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData,
            headers: {
                // 注意：使用FormData時不要設置Content-Type，
                // 瀏覽器會自動設置正確的boundary
            },
            onUploadProgress: function(progressEvent) {
                if (progressEvent.lengthComputable) {
                    const percentComplete = Math.round(
                        (progressEvent.loaded * 100) / progressEvent.total
                    );
                    progressBar.value = percentComplete;
                }
            }
        });
        
        const result = await response.json();
        if (result.success) {
            alert('上傳成功！');
            previewArea.innerHTML = '';
            uploadInput.value = '';
            submitButton.disabled = true;
        } else {
            alert('上傳失敗: ' + result.message);
        }
    } catch (error) {
        alert('上傳出錯: ' + error.message);
    } finally {
        progressBar.style.display = 'none';
        progressBar.value = 0;
    }
}

三、后端處理示例(Node.js)

3.1 Express服務器設置

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const port = 3000;

// 確保上傳目錄存在
const uploadDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true });
}

// 配置multer
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, uploadDir);
    },
    filename: function(req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
    }
});

const upload = multer({ 
    storage: storage,
    limits: {
        fileSize: 5 * 1024 * 1024, // 5MB限制
        files: 10 // 最多10個文件
    },
    fileFilter: function(req, file, cb) {
        // 只接受圖片文件
        if (!file.mimetype.match(/^image/)) {
            return cb(new Error('只允許上傳圖片文件'), false);
        }
        cb(null, true);
    }
});

// 處理上傳
app.post('/upload', upload.array('images'), (req, res) => {
    try {
        if (!req.files || req.files.length === 0) {
            return res.status(400).json({ 
                success: false, 
                message: '沒有上傳任何文件' 
            });
        }
        
        // 這里可以添加額外的處理邏輯，如數據庫記錄等
        
        res.json({ 
            success: true, 
            message: '文件上傳成功',
            files: req.files.map(file => ({
                originalname: file.originalname,
                filename: file.filename,
                size: file.size,
                mimetype: file.mimetype
            }))
        });
    } catch (err) {
        res.status(500).json({ 
            success: false, 
            message: err.message 
        });
    }
});

// 靜態文件服務
app.use('/uploads', express.static(uploadDir));

app.listen(port, () => {
    console.log(`服務器運行在 http://localhost:${port}`);
});

四、高級功能與優化

4.1 拖放上傳實現

// 添加拖放區域
const dropArea = document.createElement('div');
dropArea.id = 'dropArea';
dropArea.innerHTML = '<p>將圖片拖放到此處</p>';
document.querySelector('.upload-container').prepend(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.classList.add('highlight');
}

function unhighlight() {
    dropArea.classList.remove('highlight');
}

// 處理文件放置
dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    
    // 模擬input change事件
    const event = new Event('change');
    uploadInput.files = files;
    uploadInput.dispatchEvent(event);
}

4.2 圖片壓縮與調整

使用Canvas API實現客戶端圖片壓縮：

function compressImage(file, maxWidth, maxHeight, quality, callback) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            let width = img.width;
            let height = img.height;
            
            // 計算調整后的尺寸
            if (width > height) {
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }
            } else {
                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }
            }
            
            canvas.width = width;
            canvas.height = height;
            
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            
            canvas.toBlob(function(blob) {
                callback(blob);
            }, file.type, quality);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

4.3 分塊上傳與大文件處理

function uploadInChunks(file, url, chunkSize = 1024 * 1024) {
    const totalChunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;
    
    async function uploadNextChunk() {
        const start = currentChunk * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);
        
        const formData = new FormData();
        formData.append('file', chunk);
        formData.append('filename', file.name);
        formData.append('totalChunks', totalChunks);
        formData.append('currentChunk', currentChunk + 1); // 1-based
        
        try {
            const response = await fetch(url, {
                method: 'POST',
                body: formData
            });
            
            const result = await response.json();
            
            if (currentChunk < totalChunks - 1) {
                currentChunk++;
                uploadNextChunk();
            } else {
                console.log('上傳完成');
            }
        } catch (error) {
            console.error('上傳失敗:', error);
        }
    }
    
    uploadNextChunk();
}

五、安全考慮

1. 文件類型驗證：始終在客戶端和服務器端都驗證文件類型
2. 文件大小限制：防止大文件導致服務器資源耗盡
3. 文件名處理：避免路徑遍歷攻擊
4. 病毒掃描：對上傳文件進行病毒掃描
5. 訪問控制：限制上傳文件的訪問權限
6. HTTPS：確保上傳過程加密

六、瀏覽器兼容性

HTML5文件上傳功能在現代瀏覽器中得到良好支持，包括： - Chrome 7+ - Firefox 4+ - Safari 6+ - Edge 12+ - Opera 12+

對于舊版瀏覽器，可以考慮使用polyfill或回退方案。

結語

通過HTML5的File API、FormData和Canvas等技術，我們可以構建功能豐富、用戶體驗良好的多圖上傳功能。本文介紹了從基礎實現到高級優化的完整方案，開發者可以根據實際需求進行調整和擴展。

記住，良好的上傳功能應該兼顧功能性、用戶體驗和安全性。在實際項目中，還需要考慮服務器負載、存儲管理等因素，以構建真正健壯的上傳解決方案。 “`