h5实现图片上传

2026-01-13 23:07:15HTML

实现图片上传的H5方法

在H5中实现图片上传可以通过HTML5的<input type="file">元素结合JavaScript的File API来完成。以下是具体实现步骤：

HTML部分

<input type="file" id="fileInput" accept="image/*" multiple>
<img id="preview" style="max-width: 200px;">

JavaScript部分

const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

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

    const reader = new FileReader();
    reader.onload = function(e) {
        preview.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

使用FormData上传图片

如果需要将图片上传到服务器，可以使用FormData对象配合XMLHttpRequest或fetch API：

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

    const formData = new FormData();
    formData.append('image', file);

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

实现多图片上传

对于多图片上传，只需启用multiple属性并调整JavaScript代码：

<input type="file" id="fileInput" accept="image/*" multiple>
<div id="previewContainer"></div>

const fileInput = document.getElementById('fileInput');
const previewContainer = document.getElementById('previewContainer');

fileInput.addEventListener('change', function(e) {
    const files = e.target.files;
    previewContainer.innerHTML = '';

    Array.from(files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '200px';
            img.style.margin = '5px';
            previewContainer.appendChild(img);
        };
        reader.readAsDataURL(file);
    });
});

图片压缩处理

在上传前可以对图片进行压缩处理：

function compressImage(file, maxWidth, maxHeight, quality, callback) {
    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            let width = img.width;
            let height = img.height;

            if (width > maxWidth || height > maxHeight) {
                const ratio = Math.min(maxWidth / width, maxHeight / height);
                width *= ratio;
                height *= ratio;
            }

            const canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            canvas.toBlob(function(blob) {
                callback(blob);
            }, 'image/jpeg', quality);
        };
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

使用第三方库简化操作

对于更复杂的需求，可以考虑使用第三方库如Dropzone.js或Uppy：

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<form action="/upload" class="dropzone" id="myDropzone"></form>

Dropzone.options.myDropzone = {
    paramName: "file",
    maxFilesize: 2, // MB
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    dictDefaultMessage: "拖放图片到这里或点击上传"
};