当前位置：首页 > JavaScript

js实现上传图片预览

2026-02-28 23:09:11JavaScript

使用 FileReader 实现图片预览

通过 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) return;

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

HTML 部分需要包含文件输入和图片元素：

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

使用 URL.createObjectURL 实现预览

这种方法通过创建对象 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) return;

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

  // 记得在不需要时释放内存
  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(e) {
      const img = document.createElement('img');
      img.src = e.target.result;
      img.style.maxWidth = '200px';
      img.style.margin = '5px';
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

HTML 部分：

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

使用 Canvas 压缩图片预览

在预览时对图片进行压缩处理，适合大图片文件。

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

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

  const reader = new FileReader();
  reader.onload = function(e) {
    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);

      preview.src = canvas.toDataURL('image/jpeg', 0.7);
      preview.style.display = 'block';
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
});

拖放上传预览实现

通过拖放区域实现图片上传和预览。

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

// 防止默认拖放行为
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
});

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

// 高亮拖放区域
['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false);
});

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

function highlight() {
  dropArea.classList.add('highlight');
}

function unhighlight() {
  dropArea.classList.remove('highlight');
}

// 处理拖放文件
dropArea.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;

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

HTML 和 CSS 部分：

<div id="drop-area">
  <p>拖放图片文件到这里</p>
  <img id="drop-preview" src="#" alt="Preview" style="max-width: 300px; display: none;">
</div>

<style>
  #drop-area {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
  }
  #drop-area.highlight {
    border-color: #06f;
    background-color: #eef;
  }
</style>

这些方法涵盖了常见的图片预览需求，可以根据具体场景选择适合的实现方式。

js实现上传图片预览