头像选择功能html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>头像选择功能</title>
  <style>
    /* 触发按钮样式 */
    .profile-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      cursor: pointer;
      overflow: hidden;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      color: #999;
    }
    .profile-avatar img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 模态框基础样式 */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
    }

    .modal.active {
      display: flex;
    }

    .modal-content{
      background: #fff;
      padding: 30px;
      border-radius: 8px;
      min-width: 300px;
      position: relative;
    }
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      color: #666;
      font-size: 24px;
      cursor: pointer;
      line-height: 1;
    }

    /* 头像选择列表样式 */
    .avatar-list img {
      width: 50px;
      height: 50px;
      margin: 5px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: border-color 0.2s;
    }
    .avatar-list img:hover{
      border-color: #1677ff;
    }
    .avatar-list h4{
      margin: 0 0 10px 0;
    }

    /* 上传表单样式 */
    .upload-form {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #eee;
    }
    .upload-form h4{
      margin: 0 0 10px 0;
    }
  </style>
</head>
<body>
  <!-- 触发头像选择的元素 -->
  <div class="profile-avatar" id="avatarTrigger">
    </i><span>👤</span>
  </div>

  <!-- 头像选择模态框 -->
  <div class="modal" id="avatarModal">
    <span class="close">×</span>
    <div class="modal-content">
      <!-- 默认头像选择区 -->
      <div class="avatar-list">
        <h4>选择默认头像</h4>
        <!-- 这里使用公开占位图片，可替换为你自己的头像地址 -->
        <img src="https://picsum.photos/id/1005/50/50" alt="头像1" data-src="https://picsum.photos/id/1005/200/200">
        <img src="https://picsum.photos/id/1012/50/50" alt="头像2" data-src="https://picsum.photos/id/1012/200/200">
        <img src="https://picsum.photos/id/1025/50/50" alt="头像3" data-src="https://picsum.photos/id/1025/200/200">
        <img src="https://picsum.photos/id/1074/50/50" alt="头像4" data-src="https://picsum.photos/id/1074/200/200">
      </div>
      <!-- 自定义上传表单 -->
      <form class="upload-form" enctype="multipart/form-data">
        <h4>上传自定义头像</h4>
        <input type="file" id="avatarUpload" name="avatar" accept="image/*">
        <br><br>
        <input type="submit" value="上传头像" style="padding: 5px 15px;cursor: pointer;">
      </form>
    </div>
  </div>

  <script>
    const trigger = document.querySelector('.profile-avatar');
    const modal = document.getElementById('avatarModal');
    const closeBtn = document.querySelector('.close');
    const avatarList = document.querySelectorAll('.avatar-list img');
    const uploadForm = document.querySelector('.upload-form');
    const avatarUpload = document.getElementById('avatarUpload');

    // 点击头像区域打开选择模态框
    trigger.addEventListener('click', () => {
      modal.classList.add('active');
    });

    // 点击关闭按钮关闭模态框
    closeBtn.addEventListener('click', () => {
      modal.classList.remove('active');
    });

    // 选择默认头像
    avatarList.forEach((img) => {
      img.addEventListener('click', () => {
        // 清空原有内容，插入选中的头像
        trigger.innerHTML = `<img src="${img.dataset.src}" alt="用户头像">`;
        modal.classList.remove('active');
      });
    });

    // 自定义头像上传（本地预览版，如需后台存储可自行替换fetch请求逻辑）
    uploadForm.addEventListener('submit', (e) => {
      e.preventDefault();
      if(!avatarUpload.files.length){
        alert('请先选择图片文件');
        return;
      }
      // 本地预览：读取本地图片并展示
      const reader = new FileReader();
      reader.onload = function(e) {
        trigger.innerHTML = `<img src="${e.target.result}" alt="自定义头像">`;
        modal.classList.remove('active');
      }
      reader.readAsDataURL(avatarUpload.files[0]);
    });

    // 点击遮罩层关闭模态框
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        modal.classList.remove('active');
      }
    });
  </script>
</body>
</html>
搜索

日历

分类

归档 ▼

头像选择功能html代码
