js实现图片上传

使用HTML和JavaScript实现图片上传

创建一个简单的文件上传表单，监听文件选择事件，获取用户选择的图片文件

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

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

imageUpload.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            preview.innerHTML = '';
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    }
});

验证图片类型和大小

在上传前验证图片格式和大小，确保符合要求

imageUpload.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
    const maxSize = 2 * 1024 * 1024; // 2MB

    if (!validTypes.includes(file.type)) {
        alert('请上传JPEG、PNG或GIF格式的图片');
        return;
    }

    if (file.size > maxSize) {
        alert('图片大小不能超过2MB');
        return;
    }

    // 继续处理有效图片
});

使用FormData上传图片到服务器

通过AJAX将图片发送到服务器端处理

function uploadImage(file) {
    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);
    });
}

// 在文件选择事件中调用
imageUpload.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        uploadImage(file);
    }
});

显示上传进度

对于大文件上传，可以显示上传进度条

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

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            const percentComplete = (e.loaded / e.total) * 100;
            console.log(percentComplete + '% 已上传');
            // 更新进度条UI
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('上传完成');
        } else {
            console.error('上传出错');
        }
    };

    xhr.send(formData);
}

多图片上传实现

允许用户一次选择多个图片并上传

<input type="file" id="multiImageUpload" accept="image/*" multiple>
<div id="multiPreview"></div>

const multiUpload = document.getElementById('multiImageUpload');
const multiPreview = document.getElementById('multiPreview');

multiUpload.addEventListener('change', function(event) {
    const files = event.target.files;
    if (files.length > 0) {
        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 = '100px';
                img.style.margin = '5px';
                multiPreview.appendChild(img);
            };
            reader.readAsDataURL(file);
        });

        // 上传所有图片
        uploadMultipleImages(files);
    }
});

function uploadMultipleImages(files) {
    const formData = new FormData();
    Array.from(files).forEach((file, index) => {
        formData.append(`images[${index}]`, file);
    });

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