HTML5是一種最新的Web標準語言，它擁有許多新的特性能夠讓Web應用程序更加卓越。而仿照微信上傳頭像的代碼就是一個很好的例子，下面是該示例的代碼：
<!DOCTYPE html>
<html>
<head>
<title>上傳頭像</title>
<style>
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid #aaa;
}
.upload-btn {
margin-top: 10px;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="default-avatar.png" alt="頭像" class="avatar">
<input type="file" id="avatar-input" style="display: none">
<button class="upload-btn" onclick="document.getElementById('avatar-input').click()">上傳頭像</button>
<script>
document.getElementById('avatar-input').onchange = function (e) {
var img = document.querySelector('.avatar');
img.src = URL.createObjectURL(e.target.files[0]);
};
</script>
</body>
</html>首先，在
標簽內定義了樣式，這里主要是定義頭像和上傳按鈕的樣式。接下來，在標簽內，我們先添加一個img標簽，用于顯示默認頭像。在標簽內定義type為file，它的樣式設置為none，因為我們需要用到按鈕來觸發上傳圖片的操作。然后是