当前位置：首页 > JavaScript

js实现图片上传预览

2026-01-30 09:39:47JavaScript

实现图片上传预览的基本步骤

使用HTML5的File API结合JavaScript可以轻松实现图片上传前的预览功能。核心逻辑是通过FileReader对象读取用户选择的图片文件，并将其转换为Base64或Blob URL显示在页面上。

HTML结构部分

创建一个文件输入元素和一个用于显示预览的容器：

js实现图片上传预览

<input type="file" id="upload" accept="image/*">
<div id="preview"></div>

JavaScript基础实现

监听文件输入的变化事件，读取并显示图片：

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

  const reader = new FileReader();
  reader.onload = function(event) {
    const img = document.createElement('img');
    img.src = event.target.result;
    img.style.maxWidth = '300px';
    document.getElementById('preview').appendChild(img);
  };
  reader.readAsDataURL(file);
});

改进版实现（支持多图预览）

如果需要支持多张图片预览，可修改为以下代码：

js实现图片上传预览

document.getElementById('upload').addEventListener('change', function(e) {
  const preview = document.getElementById('preview');
  preview.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.maxWidth = '200px';
      img.style.margin = '5px';
      preview.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

使用URL.createObjectURL替代方案

对于大文件，可以使用性能更好的URL.createObjectURL方法：

document.getElementById('upload').addEventListener('change', function(e) {
  const preview = document.getElementById('preview');
  preview.innerHTML = '';

  if (this.files && this.files[0]) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(this.files[0]);
    img.onload = function() {
      URL.revokeObjectURL(this.src); // 释放内存
    };
    preview.appendChild(img);
  }
});

添加拖放上传支持

增强用户体验，添加拖放功能：

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

preview.addEventListener('dragover', (e) => {
  e.preventDefault();
  preview.style.border = '2px dashed #ccc';
});

preview.addEventListener('drop', (e) => {
  e.preventDefault();
  preview.style.border = 'none';

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

  const img = document.createElement('img');
  img.src = URL.createObjectURL(file);
  preview.innerHTML = '';
  preview.appendChild(img);
});