阅读量:0
使用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相同的目录下，用于存储上传的头像。
