JS实现头像上传预览

实现头像上传预览的方法

使用FileReader读取文件并显示预览

通过HTML的<input type="file">元素获取用户选择的文件，使用FileReader API将文件转换为DataURL，然后设置为<img>元素的src属性。

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

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

  const reader = new FileReader();
  reader.onload = function(e) {
    const preview = document.getElementById('avatar-preview');
    preview.src = e.target.result;
    preview.style.display = 'block';
  };
  reader.readAsDataURL(file);
});

添加图片验证和限制

在上传前验证文件类型和大小，确保只接受合理的图片文件。

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

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

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

  // 显示预览
  const reader = new FileReader();
  reader.onload = function(e) {
    const preview = document.getElementById('avatar-preview');
    preview.src = e.target.result;
    preview.style.display = 'block';
  };
  reader.readAsDataURL(file);
});

使用URL.createObjectURL实现预览

另一种方法是使用URL.createObjectURL创建临时URL，这种方法性能更好但不需手动释放内存。

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

  const preview = document.getElementById('avatar-preview');
  if (preview.src) {
    URL.revokeObjectURL(preview.src); // 释放之前创建的URL
  }

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

添加图片裁剪功能

使用cropper.js等库实现上传前的图片裁剪功能。

<link  href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

<div style="display: none;" id="crop-container">
  <img id="crop-image" style="max-width: 100%;">
  <button id="crop-btn">裁剪</button>
</div>

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

  const reader = new FileReader();
  reader.onload = function(e) {
    const cropContainer = document.getElementById('crop-container');
    const cropImage = document.getElementById('crop-image');

    cropImage.src = e.target.result;
    cropContainer.style.display = 'block';

    // 初始化cropper
    cropper = new Cropper(cropImage, {
      aspectRatio: 1,
      viewMode: 1
    });
  };
  reader.readAsDataURL(file);
});

document.getElementById('crop-btn').addEventListener('click', function() {
  const canvas = cropper.getCroppedCanvas({
    width: 200,
    height: 200
  });

  document.getElementById('avatar-preview').src = canvas.toDataURL('image/png');
  document.getElementById('crop-container').style.display = 'none';
  cropper.destroy();
});

响应式设计优化

添加CSS使预览区域在不同设备上都能良好显示。

#avatar-preview {
  border-radius: 50%;
  object-fit: cover;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#avatar-upload {
  display: none;
}

.upload-label {
  display: inline-block;
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

<label for="avatar-upload" class="upload-label">选择头像</label>

这些方法提供了从基础到进阶的头像上传预览实现方案，可以根据具体需求选择适合的方式或组合使用。