h5实现图片上传

实现图片上传的基本方法

使用HTML5的<input type="file">元素结合JavaScript的File API可以实现图片上传功能。需要设置accept属性限制文件类型为图片，例如image/*。

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

监听文件选择事件

通过JavaScript监听change事件获取用户选择的图片文件。使用FileReader对象可以读取文件内容并预览。

document.getElementById('upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file.type.match('image.*')) 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对象构建表单数据，通过AJAX（如fetch或XMLHttpRequest）将图片发送到服务器。

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

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

实现拖拽上传

添加拖拽区域并监听dragover和drop事件可以增强用户体验。需要阻止默认行为以避免浏览器直接打开文件。

<div id="drop-area">拖拽图片到此处</div>

const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragover', e => {
  e.preventDefault();
});

dropArea.addEventListener('drop', e => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  // 处理文件上传
});

图片压缩处理

在上传前可以使用canvas对图片进行压缩，减少上传文件大小。

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

进度显示

通过XMLHttpRequest的upload事件可以监控上传进度。

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', e => {
  if (e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`${percent}% uploaded`);
  }
});
xhr.open('POST', '/upload');
xhr.send(formData);