h5移动端实现图片上传

实现图片上传的基本方法

在H5移动端实现图片上传，可以通过HTML5的<input type="file">元素结合JavaScript完成。以下是一个基本实现方式：

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

document.getElementById('uploadInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('image', file);

    fetch('/upload', {
      method: 'POST',
      body: formData
    }).then(response => {
      // 处理服务器响应
    });
  }
});

图片预览功能

在用户选择图片后立即显示预览可以提升用户体验。可以使用FileReader实现：

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

图片压缩处理

移动端上传大图片时，压缩可以减少带宽消耗：

function compressImage(file, quality = 0.7) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (event) => {
      const img = new Image();
      img.src = event.target.result;
      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);
        canvas.toBlob((blob) => {
          resolve(new File([blob], file.name, {
            type: 'image/jpeg',
            lastModified: Date.now()
          }));
        }, 'image/jpeg', quality);
      };
    };
  });
}

多图上传实现

支持一次选择多张图片上传：

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

document.getElementById('uploadInput').addEventListener('change', async function(e) {
  const files = Array.from(e.target.files);
  const formData = new FormData();

  for (let i = 0; i < files.length; i++) {
    const compressedFile = await compressImage(files[i]);
    formData.append(`images[]`, compressedFile);
  }

  fetch('/multi-upload', {
    method: 'POST',
    body: formData
  });
});

移动端拍照上传

针对移动设备优化，可以直接调用相机：

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

进度显示功能

上传大文件时显示进度条：

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
  const percent = Math.round((e.loaded / e.total) * 100);
  document.getElementById('progress').style.width = `${percent}%`;
});
xhr.open('POST', '/upload');
xhr.send(formData);

兼容性处理

处理不同浏览器的兼容性问题：

// 检查FileReader支持
if (window.FileReader) {
  // 支持FileReader
} else {
  alert('您的浏览器不支持文件预览功能');
}

// 检查FormData支持
if (window.FormData) {
  // 支持FormData
}

安全考虑

上传图片时应进行验证：

const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
  alert('仅支持JPEG、PNG和GIF格式');
  return;
}

if (file.size > 5 * 1024 * 1024) { // 5MB限制
  alert('图片大小不能超过5MB');
  return;
}

服务器端接收

Node.js示例接收上传图片：

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

app.post('/upload', upload.single('image'), (req, res) => {
  // req.file包含上传文件信息
  res.json({ success: true });
});

响应式布局适配

确保上传组件在不同设备上显示良好：

#uploadInput {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

用户体验优化

添加拖放上传功能：

const dropArea = document.getElementById('dropArea');

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('dragover');
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');
  const files = e.dataTransfer.files;
  // 处理上传文件
});