h5实现上传图片

实现H5图片上传的基础方法

使用HTML5的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。基本实现代码如下：

<input type="file" id="uploadInput" accept="image/*">
<img id="preview" style="max-width: 300px; display: none;">

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

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

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

使用FormData进行AJAX上传

通过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));
}

实现多图片上传

通过添加multiple属性可以实现多文件选择：

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

处理多文件时需要遍历文件列表：

uploadInput.addEventListener('change', function(e) {
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    // 处理每个文件
  }
});

图片压缩处理

可以使用Canvas API对图片进行压缩：

function compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        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(resolve, 'image/jpeg', quality);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

进度显示实现

XMLHttpRequest可以监听上传进度：

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', function(e) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  });
  xhr.open('POST', '/upload', true);
  const formData = new FormData();
  formData.append('image', file);
  xhr.send(formData);
}

移动端适配注意事项

移动端需要考虑以下特殊处理：

• 添加capture属性可以直接调用相机：<input type="file" accept="image/*" capture>
• 处理图片方向问题，部分移动设备拍摄的照片可能带有EXIF方向信息
• 针对大图片进行适当压缩，避免内存问题

安全性考虑

实现图片上传时应注意：

• 服务器端验证文件类型，不能仅依赖前端验证
• 限制上传文件大小
• 对上传图片进行病毒扫描
• 生成随机文件名避免覆盖攻击

以上方法组合使用可以构建一个完整的H5图片上传解决方案，根据实际需求选择适当的技术组合。