当前位置：首页 > JavaScript

js实现图片预览

2026-02-28 17:58:49JavaScript

使用 FileReader API 实现图片预览

通过 FileReader 对象读取用户选择的图片文件，转换为 Data URL 后显示在页面上。以下是核心代码示例：

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

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

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

使用 URL.createObjectURL 实现预览

该方法通过创建临时对象 URL 实现更高效的预览，特别适合大文件：

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

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

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

多图预览实现

通过循环处理多个文件实现批量预览：

const multiInput = document.getElementById('multi-file');
const gallery = document.getElementById('gallery');

multiInput.addEventListener('change', function(e) {
  gallery.innerHTML = '';
  Array.from(e.target.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;
      gallery.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

拖拽上传预览

添加拖拽区域的事件监听实现拖放预览：

const dropZone = document.getElementById('drop-zone');

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

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

dropZone.addEventListener('drop', function(e) {
  e.preventDefault();
  dropZone.classList.remove('dragover');

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

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

注意事项

文件类型验证应同时检查 file.type 和文件扩展名
移动端可能需要添加 accept="image/*" 属性
大文件预览建议使用 URL.createObjectURL
记得清除之前的预览结果或释放对象 URL
考虑添加加载状态提示和错误处理

完整实现通常需要配合 HTML 结构：

<input type="file" id="file-input" accept="image/*">
<img id="preview" style="max-width: 300px;">

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

js实现图片预览