js实现上传图片预览

使用FileReader实现图片预览

通过FileReader对象读取用户选择的图片文件，并将其显示在页面上。这种方法适用于现代浏览器。

// HTML部分
<input type="file" id="fileInput" accept="image/*">
<img id="preview" src="#" alt="预览图" style="max-width: 300px; display: none;">

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

  const preview = document.getElementById('preview');
  const reader = new FileReader();

  reader.onload = function(e) {
    preview.src = e.target.result;
    preview.style.display = 'block';
  };

  reader.readAsDataURL(file);
});

使用URL.createObjectURL实现预览

这种方法通过创建对象URL来显示图片，性能较好且不需要等待文件完全读取。

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

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

  preview.src = objectURL;
  preview.style.display = 'block';

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

多文件预览实现

如果需要同时预览多个图片文件，可以使用以下方法：

// HTML部分
<input type="file" id="multiFileInput" accept="image/*" multiple>
<div id="previewContainer"></div>

// JavaScript部分
document.getElementById('multiFileInput').addEventListener('change', function(e) {
  const files = e.target.files;
  const container = document.getElementById('previewContainer');
  container.innerHTML = '';

  Array.from(files).forEach(file => {
    if (!file.type.match('image.*')) return;

    const reader = new FileReader();
    const img = document.createElement('img');
    img.style.maxWidth = '200px';
    img.style.margin = '5px';

    reader.onload = function(e) {
      img.src = e.target.result;
      container.appendChild(img);
    };

    reader.readAsDataURL(file);
  });
});

图片上传前验证

在上传前对图片进行基本验证，包括文件类型、大小等：

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

  // 验证文件类型
  if (!file.type.match('image.*')) {
    alert('请选择图片文件');
    return;
  }

  // 验证文件大小（2MB以内）
  if (file.size > 2 * 1024 * 1024) {
    alert('图片大小不能超过2MB');
    return;
  }

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

使用canvas压缩图片

在上传前对图片进行压缩处理：

function compressImage(file, maxWidth, maxHeight, quality, callback) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      if (width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
      }

      if (height > maxHeight) {
        width *= maxHeight / height;
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;

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

      canvas.toBlob(callback, 'image/jpeg', quality);
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

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

  compressImage(file, 800, 800, 0.7, function(blob) {
    const preview = document.getElementById('preview');
    preview.src = URL.createObjectURL(blob);
    preview.style.display = 'block';
  });
});