HTML点击头像修改页面,js/jquery 实现点击图片更换头像(图片)实例
时间: 2023-09-20 15:10:00 浏览: 240
这里提供一个简单的 HTML/CSS/JavaScript 的实现。
HTML 部分:
```html
<div class="avatar-container">
<img src="default-avatar.png" alt="Avatar" id="avatar-image">
<label for="avatar-input" id="avatar-label">Change Avatar</label>
<input type="file" accept="image/*" id="avatar-input">
</div>
```
CSS 部分:
```css
.avatar-container {
position: relative;
width: 150px;
height: 150px;
}
#avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
cursor: pointer;
}
#avatar-label {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
background-color: #000;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
```
JavaScript 部分:
```javascript
// 获取相关元素
const avatarImage = document.getElementById('avatar-image');
const avatarInput = document.getElementById('avatar-input');
// 监听图片点击事件
avatarImage.addEventListener('click', () => {
avatarInput.click();
});
// 监听图片上传事件
avatarInput.addEventListener('change', () => {
const file = avatarInput.files[0];
const reader = new FileReader();
// 读取上传的图片,并将图片设置为头像
reader.onload = () => {
avatarImage.src = reader.result;
};
reader.readAsDataURL(file);
});
```
通过以上代码,当用户点击头像时,会触发文件上传的事件,用户选择上传的图片后,将对应的图片设置为头像。