js实现上传图片预览

使用FileReader实现图片预览

通过FileReader对象读取用户选择的图片文件，并将其显示在页面上。HTML部分需要包含一个文件输入框和一个用于显示预览的img元素。

<input type="file" id="upload" accept="image/*">
<img id="preview" src="#" alt="预览图" style="max-width: 300px; display: none;">

document.getElementById('upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

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

使用URL.createObjectURL实现预览

这种方法性能更好，不需要等待文件完全读取就能创建预览，但需要手动释放内存。

document.getElementById('upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const preview = document.getElementById('preview');
  const objectURL = URL.createObjectURL(file);
  preview.src = objectURL;
  preview.style.display = 'block';

  // 记得在不需要时释放内存
  preview.onload = function() {
    URL.revokeObjectURL(objectURL);
  };
});

多图片预览实现

如果需要预览多个图片，可以循环处理文件列表并动态创建预览元素。

<input type="file" id="multi-upload" accept="image/*" multiple>
<div id="preview-container"></div>

document.getElementById('multi-upload').addEventListener('change', function(e) {
  const files = e.target.files;
  const container = document.getElementById('preview-container');
  container.innerHTML = '';

  Array.from(files).forEach(file => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = document.createElement('img');
      img.src = event.target.result;
      img.style.maxWidth = '200px';
      img.style.margin = '5px';
      container.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

预览前验证图片尺寸

在上传前可以验证图片的宽度和高度是否符合要求。

document.getElementById('upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const img = new Image();
  img.onload = function() {
    if (this.width > 1024 || this.height > 1024) {
      alert('图片尺寸不能超过1024x1024像素');
      return;
    }

    const preview = document.getElementById('preview');
    preview.src = URL.createObjectURL(file);
    preview.style.display = 'block';
  };
  img.src = URL.createObjectURL(file);
});

使用canvas压缩图片预览

对于大图片，可以使用canvas进行压缩后再显示预览。

document.getElementById('upload').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const img = new Image();
  img.onload = function() {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 设置最大尺寸
    const MAX_WIDTH = 800;
    const MAX_HEIGHT = 800;
    let width = img.width;
    let height = img.height;

    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }

    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);

    const preview = document.getElementById('preview');
    preview.src = canvas.toDataURL('image/jpeg', 0.7);
    preview.style.display = 'block';
  };
  img.src = URL.createObjectURL(file);
});