js 实现上传图片预览

使用 FileReader 实现图片预览

通过 FileReader 对象的 readAsDataURL 方法可以将图片文件转换为 base64 编码，直接在页面上显示预览。

const input = document.getElementById('file-input');
const preview = document.getElementById('preview');

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 方法可以创建一个指向文件对象的临时 URL，适合显示大文件预览，性能优于 FileReader。

const input = document.getElementById('file-input');
const preview = document.getElementById('preview');

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 input = document.getElementById('multi-file-input');
const previewContainer = document.getElementById('preview-container');

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

  Array.from(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.maxWidth = '200px';
      img.style.maxHeight = '200px';
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

拖放上传预览实现

通过 HTML5 的拖放 API 可以实现更友好的图片上传预览体验。

const dropArea = document.getElementById('drop-area');
const preview = document.getElementById('preview');

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

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

dropArea.addEventListener('drop', function(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);
});

图片预览样式优化

为预览图片添加样式可以提升用户体验，以下是一些常见样式建议：

#preview {
  max-width: 300px;
  max-height: 300px;
  border: 1px dashed #ccc;
  margin-top: 10px;
  display: none;
}

#preview.visible {
  display: block;
}

#drop-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}

#drop-area.dragover {
  border-color: #666;
  background-color: #f0f0f0;
}

兼容性处理

考虑旧版本浏览器的兼容性，可以添加特性检测和回退方案。

if (window.FileReader) {
  // 使用 FileReader 实现
} else if (window.URL && window.URL.createObjectURL) {
  // 使用 createObjectURL 实现
} else {
  alert('您的浏览器不支持图片预览功能');
}

图片验证和限制

在上传前对图片进行验证，确保符合要求。

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

  // 检查文件类型
  if (!file.type.match('image.*')) {
    alert('请选择图片文件');
    return;
  }

  // 检查文件大小 (2MB)
  if (file.size > 2 * 1024 * 1024) {
    alert('图片大小不能超过2MB');
    return;
  }

  // 继续预览处理
});