h5实现上传图片

2026-03-06 09:18:48HTML

使用HTML5实现图片上传

HTML5提供了<input type="file">元素和File API，可以方便地实现图片上传功能。以下是一个完整的实现方案。

基础HTML结构

创建包含文件输入和预览区域的HTML结构：

<input type="file" id="imageUpload" accept="image/*">
<div id="imagePreview"></div>
<button id="uploadButton">上传图片</button>

JavaScript处理逻辑

添加事件监听器处理文件选择和上传：

document.getElementById('imageUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = document.createElement('img');
        img.src = e.target.result;
        img.style.maxWidth = '300px';
        document.getElementById('imagePreview').innerHTML = '';
        document.getElementById('imagePreview').appendChild(img);
    };
    reader.readAsDataURL(file);
});

document.getElementById('uploadButton').addEventListener('click', function() {
    const fileInput = document.getElementById('imageUpload');
    if (!fileInput.files[0]) {
        alert('请先选择图片');
        return;
    }

    const formData = new FormData();
    formData.append('image', fileInput.files[0]);

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

服务器端处理示例（Node.js）

使用Express处理上传的图片：

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

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

app.post('/upload', upload.single('image'), (req, res) => {
    res.json({
        success: true,
        file: req.file
    });
});

app.listen(3000, () => console.log('服务器已启动'));

进阶功能实现

添加多图片选择和拖放上传支持：

// 多图片选择
<input type="file" id="imageUpload" accept="image/*" multiple>

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

// 拖放事件处理
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropArea.style.borderColor = 'blue';
});

dropArea.addEventListener('dragleave', () => {
    dropArea.style.borderColor = '#ccc';
});

dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.style.borderColor = '#ccc';
    const files = e.dataTransfer.files;
    // 处理拖放的文件
});

图片压缩处理

使用canvas实现客户端图片压缩：

function compressImage(file, quality, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        const img = new Image();
        img.src = e.target.result;
        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.width, canvas.height);
            canvas.toBlob(callback, 'image/jpeg', quality);
        };
    };
}