写一个上传头像的前端代码
时间: 2024-04-22 09:24:44 浏览: 10
以下是一个简单的前端代码示例,用于实现上传头像的功能。
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<title>上传头像</title>
</head>
<body>
<h1>上传头像</h1>
<input type="file" id="avatarInput" accept="image/jpeg, image/png">
<button onclick="uploadAvatar()">上传</button>
<div id="avatarPreview"></div>
<script src="upload.js"></script>
</body>
</html>
```
JavaScript部分(upload.js):
```javascript
function uploadAvatar() {
const fileInput = document.getElementById('avatarInput');
const previewContainer = document.getElementById('avatarPreview');
const file = fileInput.files[0];
const fileType = file.type;
if (fileType !== 'image/jpeg' && fileType !== 'image/png') {
alert('只允许上传jpg、png格式的文件');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const previewImage = document.createElement('img');
previewImage.src = e.target.result;
previewContainer.innerHTML = '';
previewContainer.appendChild(previewImage);
}
reader.readAsDataURL(file);
}
```
这段代码使用了HTML和JavaScript来实现上传头像的功能。用户可以通过文件选择框选择头像文件,在选择文件后点击"上传"按钮。JavaScript代码会进行文件类型的检查,如果选择的文件不是jpg或png格式,则会弹出一个警告框。如果文件类型符合要求,JavaScript会使用FileReader对象将文件读取为DataURL,并将其显示在页面上。
请注意,这只是一个简单的示例,实际开发中可能需要更多的文件验证、图片处理和后端交互等功能。