js实现图片预览

使用FileReader API实现图片预览

通过FileReader对象读取用户选择的图片文件并显示预览：

const input = document.getElementById('imageInput');
const preview = document.getElementById('imagePreview');

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

  const reader = new FileReader();
  reader.onload = function(event) {
    preview.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

使用URL.createObjectURL实现预览

对于临时预览需求，可以使用更高效的URL.createObjectURL方法：

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

  const objectURL = URL.createObjectURL(file);
  preview.src = objectURL;

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

多图片预览实现

处理多文件选择并生成预览：

const multiInput = document.getElementById('multiImageInput');
const previewContainer = document.getElementById('previewContainer');

multiInput.addEventListener('change', function(e) {
  previewContainer.innerHTML = '';
  Array.from(e.target.files).forEach(file => {
    if (!file.type.match('image.*')) return;

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

拖放图片预览实现

实现拖放区域的图片预览功能：

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

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

dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('dragover');
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');

  const file = e.dataTransfer.files[0];
  if (!file.type.match('image.*')) return;

  const reader = new FileReader();
  reader.onload = function(event) {
    preview.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

预览时限制图片尺寸

在上传前检查图片尺寸：

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

  const img = new Image();
  img.onload = function() {
    if (this.width > 2000 || this.height > 2000) {
      alert('图片尺寸过大');
      return;
    }
    preview.src = URL.createObjectURL(file);
  };
  img.src = URL.createObjectURL(file);
});

添加预览样式优化

为预览图片添加基础样式：

#imagePreview {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border: 1px dashed #ccc;
  margin-top: 10px;
}

#previewContainer img {
  margin: 5px;
  border: 1px solid #eee;
}

兼容性注意事项

FileReader API兼容大多数现代浏览器，但对于IE10以下版本需要polyfill。URL.createObjectURL方法在IE10+中可用。实际应用中应添加适当的错误处理代码，检查文件类型是否为图像，并处理读取失败的情况。