JS实现头像上传预览

2026-03-01 18:37:36JavaScript

实现头像上传预览的基本思路

使用HTML的<input type="file">元素获取用户选择的图片文件，通过FileReader对象读取文件内容，最终将图片数据赋值给<img>标签的src属性实现预览效果。

HTML结构设置

创建文件选择输入框和用于预览的图片容器：

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

accept="image/*"限制只能选择图片文件
预览图片默认隐藏（display: none）

JavaScript核心代码

监听文件选择变化并处理预览：

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

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

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

  if (file.type.match('image.*')) {
    reader.readAsDataURL(file);
  } else {
    alert('请选择有效的图片文件');
  }
});

扩展功能实现

限制文件大小

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

图片裁剪预览 建议使用第三方库如cropper.js：

// 引入cropper.js后
const cropper = new Cropper(preview, {
  aspectRatio: 1,
  viewMode: 1
});

样式优化建议

为上传区域添加视觉反馈：

JS实现头像上传预览

#avatar-preview {
  border-radius: 50%;
  object-fit: cover;
  margin-top: 10px;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    #avatar-preview {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      margin-top: 10px;
      display: none;
    }
  </style>
</head>
<body>
  <input type="file" id="avatar-upload" accept="image/*">
  <img id="avatar-preview" src="#" alt="头像预览">

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

      const MAX_SIZE = 2 * 1024 * 1024;
      if (file.size > MAX_SIZE) {
        alert('文件大小不能超过2MB');
        return;
      }

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

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

      if (file.type.match('image.*')) {
        reader.readAsDataURL(file);
      } else {
        alert('请选择有效的图片文件');
      }
    });
  </script>
</body>
</html>