Bootstrap圆形头像_上传头像

使用Bootstrap圆形头像上传功能，可以轻松地将用户上传的头像转换为圆形，并应用到网站或应用程序中。

Bootstrap圆形头像上传头像

创新互联专注于玉山企业网站建设,自适应网站建设,电子商务商城网站建设。玉山网站建设公司,为玉山等地区提供建站服务。全流程按需设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

1、引入Bootstrap库

在HTML文件的<head>标签内，添加以下代码以引入Bootstrap库：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2、创建表单

在HTML文件的<body>标签内，创建一个表单，包含一个文件输入框和一个提交按钮，代码如下：

<form action="upload_avatar.php" method="post" enctype="multipart/formdata">
  <div class="formgroup">
    <label for="avatar">选择头像</label>
    <input type="file" name="avatar" id="avatar" accept="image/*">
  </div>
  <button type="submit" class="btn btndefault">上传头像</button>
</form>

3、显示圆形头像

在表单下方，使用Bootstrap的imgcircle类来显示圆形头像，代码如下：

<div class="container">
  <img src="default_avatar.jpg" alt="默认头像" class="imgcircle imgthumbnail" style="width: 100px; height: 100px;">
</div>

将default_avatar.jpg替换为默认头像的图片路径。

4、处理上传的头像

在服务器端，创建一个名为upload_avatar.php的文件，用于处理上传的头像，代码如下：

<?php
if (isset($_FILES['avatar'])) {
  $file = $_FILES['avatar'];
  $fileName = $file['name'];
  $fileTmpName = $file['tmp_name'];
  $fileSize = $file['size'];
  $fileError = $file['error'];
  $fileExt = pathinfo($fileName, PATHINFO_EXTENSION);
  $allowed = array('jpg', 'jpeg', 'png', 'gif');
  if (in_array($fileExt, $allowed)) {
    if ($fileError === 0) {
      if ($fileSize < 5000000) {
        $fileNameNew = uniqid('', true).".".$fileExt;
        $fileDestination = 'uploads/'.$fileNameNew;
        move_uploaded_file($fileTmpName, $fileDestination);
        header("Location: index.php?uploadsuccess");
      } else {
        echo "错误：文件大小超过限制！";
      }
    } else {
      echo "错误：无法上传文件！";
    }
  } else {
    echo "错误：仅允许jpg、jpeg、png和gif格式的文件！";
  }
}
?>

将uploads文件夹放在与upload_avatar.php相同的目录下，用于存储上传的头像。