学生介绍系统：带图片上传功能的简单 HTML 代码示例

以下是一个简单的学生介绍系统的 HTML 代码，其中包含了选择图片的功能。你可以根据需要进行修改和扩展。

<!DOCTYPE html>
<html>
<head>
  <title>学生介绍系统</title>
  <style>
    .student-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 4px;
      max-width: 300px;
      margin: 0 auto;
    }
    
    #profile-pic {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 10px;
    }
    
    .choose-file-button {
      padding: 8px 12px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-bottom: 10px;
    }
    
    .hidden-file-input {
      display: none;
    }
  </style>
  <script>
    function handleFileSelect(event) {
      var file = event.target.files[0];
      var reader = new FileReader();
      var profilePic = document.getElementById('profile-pic');
      
      reader.onload = function(e) {
        profilePic.src = e.target.result;
      };
      
      reader.readAsDataURL(file);
    }
  </script>
</head>
<body>
  <h1>学生介绍系统</h1>
  
  <div class="student-card">
    <img id="profile-pic" src="default-profile-pic.png" alt="学生照片">
    
    <input type="file" id="file-upload" class="hidden-file-input" accept="image/*" onchange="handleFileSelect(event)">
    <label for="file-upload" class="choose-file-button">选择照片</label>
  </div>
</body>
</html>

在上述代码中，我们创建了一个学生介绍系统的学生卡片容器（.student-card），其中包含一个用于显示学生照片的<img>元素（#profile-pic）。通过选择文件按钮（.choose-file-button）和隐藏的文件输入字段（.hidden-file-input），用户可以选择图片文件。当用户选择了一张图片文件后，JavaScript函数handleFileSelect(event)会读取该文件，并将其显示在学生照片区域。

请注意，上述代码中的默认照片路径（default-profile-pic.png）需要替换为你自己的默认照片路径。你可以将上述代码保存为一个HTML文件（例如：student_intro_system.html），然后在浏览器中打开该文件，即可看到具备选择图片功能的学生介绍系统。你可以根据实际需求和设计要求，自定义CSS样式并添加其他学生信息和功能。