当前位置：首页 > JavaScript

js 实现上传图片预览

2026-03-01 00:46:05JavaScript

使用 FileReader API 实现图片预览

通过 FileReader 读取用户选择的图片文件，并将其转换为 Base64 或 Data URL，直接赋值给 <img> 标签的 src 属性。

<input type="file" id="fileInput" accept="image/*">
<img id="preview" src="#" alt="Preview">

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

    const reader = new FileReader();
    reader.onload = function(event) {
      document.getElementById('preview').src = event.target.result;
    };
    reader.readAsDataURL(file);
  });
</script>

使用 URL.createObjectURL 实现预览

通过 URL.createObjectURL 创建临时对象 URL，适合大文件预览，性能更好但需手动释放内存。

<input type="file" id="fileInput" accept="image/*">
<img id="preview" src="#" alt="Preview">

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

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

    // 清理内存（可选，在不需要时调用）
    // URL.revokeObjectURL(objectURL);
  });
</script>

多图片预览实现

通过循环处理多个文件，结合 document.createElement 动态生成预览区域。

<input type="file" id="fileInput" multiple accept="image/*">
<div id="previewContainer"></div>

<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    const files = e.target.files;
    const previewContainer = document.getElementById('previewContainer');
    previewContainer.innerHTML = '';

    Array.from(files).forEach(file => {
      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);
    });
  });
</script>

图片尺寸限制与压缩

通过 canvas 实现图片压缩和尺寸调整，适合需要控制图片质量的场景。

function compressImage(file, maxWidth, maxHeight, quality) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

        if (width > maxWidth) {
          height = Math.round((height * maxWidth) / width);
          width = maxWidth;
        }
        if (height > maxHeight) {
          width = Math.round((width * maxHeight) / height);
          height = maxHeight;
        }

        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);

        resolve(canvas.toDataURL('image/jpeg', quality));
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  });
}

// 使用示例
document.getElementById('fileInput').addEventListener('change', async function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const compressedDataUrl = await compressImage(file, 800, 800, 0.7);
  document.getElementById('preview').src = compressedDataUrl;
});