h5移动端实现图片上传

移动端H5图片上传实现方法

使用input元素

在H5页面中添加一个input元素，设置type为file，并添加accept属性限制文件类型为图片：

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

通过JavaScript监听change事件获取用户选择的图片文件：

document.getElementById('uploadInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        // 处理文件上传
    }
});

图片预览功能

使用FileReader API实现图片预览：

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

压缩图片

使用Canvas API进行图片压缩：

function compressImage(file, quality = 0.8) {
    return new Promise((resolve) => {
        const img = new Image();
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob((blob) => resolve(blob), 'image/jpeg', quality);
        };
        img.src = URL.createObjectURL(file);
    });
}

上传到服务器

使用FormData和fetch API上传图片：

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

fetch('https://your-server.com/upload', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log('Upload success:', data))
.catch(error => console.error('Upload error:', error));

移动端适配注意事项

• 添加capture属性可以调用移动设备相机：

  <input type="file" accept="image/*" capture="camera">

• 针对不同设备的兼容性问题，建议使用成熟的第三方库如：

  • react-dropzone（React项目）
  • vue-upload-component（Vue项目）
  • plupload（通用解决方案）

• 大文件上传需要考虑分片上传或断点续传功能

安全性考虑

• 服务器端需要验证文件类型和大小
• 对上传的文件进行病毒扫描
• 限制上传文件的最大尺寸
• 实现CSRF防护机制

性能优化

• 使用Web Workers处理大文件压缩
• 显示上传进度条提升用户体验
• 实现多图片批量上传功能
• 采用懒加载技术处理大量图片预览