当前位置：首页 > JavaScript

图片上传实现js

2026-04-07 16:43:11JavaScript

使用HTML5 File API实现图片上传

通过HTML5的File API可以方便地实现图片上传功能。以下是一个基本的实现示例：

<input type="file" id="imageUpload" accept="image/*">

document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file.type.match('image.*')) {
        alert('请选择图片文件');
        return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = document.createElement('img');
        img.src = e.target.result;
        document.body.appendChild(img);
    };
    reader.readAsDataURL(file);
});

使用FormData实现多图上传

需要上传多张图片到服务器时，可以使用FormData对象：

const formData = new FormData();
const files = document.getElementById('multiImageUpload').files;

Array.from(files).forEach(file => {
    formData.append('images[]', file);
});

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

图片预览与压缩处理

在上传前可以添加图片预览和压缩功能：

function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);

        img.onload = () => {
            const canvas = document.createElement('canvas');
            let width = img.width;
            let height = img.height;

            if (width > maxWidth) {
                height *= maxWidth / width;
                width = maxWidth;
            }

            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(resolve, 'image/jpeg', quality);
        };
    });
}

使用第三方库简化流程

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

// 使用Dropzone.js示例
Dropzone.options.myDropzone = {
    url: "/upload",
    paramName: "file",
    maxFilesize: 5,
    acceptedFiles: "image/*",
    addRemoveLinks: true
};

进度条显示上传状态

需要显示上传进度时，可以使用XMLHttpRequest或fetch API的进度事件：

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

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