当前位置：首页 > JavaScript

js 实现上传图片预览

2026-04-04 01:18:01JavaScript

使用 FileReader 实现图片预览

通过 FileReader 对象读取用户选择的图片文件，并将其转换为 Data URL 显示在页面上。这种方法兼容性较好，适用于大多数现代浏览器。

const input = document.getElementById('fileInput');
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，这种方法性能更好，但需要手动释放内存。

js 实现上传图片预览

const input = document.getElementById('fileInput');
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);
  };
});

多图片预览实现

如果需要同时预览多个图片，可以遍历文件列表并为每个文件创建预览。

js 实现上传图片预览

const input = document.getElementById('multiFileInput');
const previewContainer = document.getElementById('previewContainer');

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.height = '100px';
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

限制图片类型和大小

在上传前可以检查文件类型和大小，提供更好的用户体验。

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

  // 检查文件类型
  const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!validTypes.includes(file.type)) {
    alert('请上传 JPEG、PNG 或 GIF 格式的图片');
    return;
  }

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

  // 预览代码...
});

使用 CSS 美化上传区域

可以通过隐藏原生 input 元素，使用 label 元素自定义上传按钮样式。

<style>
  .upload-container {
    position: relative;
    width: 200px;
  }
  #fileInput {
    display: none;
  }
  .upload-btn {
    display: block;
    padding: 10px;
    background: #4CAF50;
    color: white;
    text-align: center;
    cursor: pointer;
  }
  #preview {
    max-width: 100%;
    margin-top: 10px;
  }
</style>

<div class="upload-container">
  <label for="fileInput" class="upload-btn">选择图片</label>
  <input type="file" id="fileInput" accept="image/*">
  <img id="preview" src="#" alt="预览图">
</div>

这些方法提供了从基础到进阶的图片预览实现方案，可以根据具体需求选择适合的方式。对于现代浏览器，推荐使用 URL.createObjectURL 方法，因为它性能更好且不需要等待文件完全读取。