js实现图片预览

使用FileReader实现图片预览

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件内容。通过监听文件输入的变化，可以读取文件并显示预览。

document.getElementById('fileInput').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 preview = document.getElementById('preview');
    preview.src = e.target.result;
    preview.style.display = 'block';
  };
  reader.readAsDataURL(file);
});

使用URL.createObjectURL实现预览

这种方法性能更好，不需要等待文件完全读取就能创建预览，特别适合大文件。

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

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

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

多图预览实现

处理多个文件选择时，需要遍历文件列表并为每个文件创建预览。

document.getElementById('multiFileInput').addEventListener('change', function(e) {
  const files = e.target.files;
  const previewContainer = document.getElementById('previewContainer');
  previewContainer.innerHTML = '';

  Array.from(files).forEach(file => {
    if (!file.type.match('image.*')) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      img.style.height = '100px';
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

拖放上传预览

通过监听拖放事件，可以实现更友好的图片上传预览体验。

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

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

dropArea.addEventListener('drop', function(e) {
  const dt = e.dataTransfer;
  const files = dt.files;
  const preview = document.getElementById('preview');

  if (files.length && files[0].type.match('image.*')) {
    const reader = new FileReader();
    reader.onload = function(e) {
      preview.src = e.target.result;
      preview.style.display = 'block';
    };
    reader.readAsDataURL(files[0]);
  }
});

预览时限制图片大小

在上传前检查图片尺寸，确保符合要求。

document.getElementById('fileInput').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 = new Image();
    img.onload = function() {
      if (img.width > 1024 || img.height > 1024) {
        alert('图片尺寸不能超过1024x1024像素');
        return;
      }
      document.getElementById('preview').src = e.target.result;
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
});

使用Canvas压缩图片预览

在预览时对图片进行压缩处理，减少上传数据量。

function compressImage(file, maxWidth, maxHeight, quality) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }

        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        resolve(canvas.toDataURL('image/jpeg', quality));
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

document.getElementById('fileInput').addEventListener('change', async function(e) {
  const file = e.target.files[0];
  if (!file.type.match('image.*')) return;

  const compressedDataUrl = await compressImage(file, 800, 800, 0.7);
  document.getElementById('preview').src = compressedDataUrl;
});