HTML電腦上傳頭像代碼 在網站或者應用中，上傳頭像是一項非常基礎但是重要的功能。本文將介紹如何使用HTML代碼在電腦端上傳頭像，并且在上傳頭像時預覽圖片。 第一步是在HTML表單中添加一個input元素，用于上傳文件。

上傳頭像：

<input type="file" name="avatar" accept="image/jpeg, image/png">

在代碼中，input元素的type屬性為"file"，用于聲明這是一個文件上傳的表單元素。name屬性用于定義上傳后服務端獲取文件的名稱。accept屬性用于定義允許上傳的文件類型，以逗號分隔。在本例中，只允許上傳JPEG和PNG格式的圖片。 第二步是在JavaScript中監聽上傳文件的change事件，并且預覽選中的文件。

// 獲取文件上傳表單元素
var avatarInput = document.querySelector('input[name="avatar"]');
// 監聽表單元素的change事件
avatarInput.addEventListener('change', function (e) {
// 獲取選中的文件
var file = e.target.files[0];
// 使用URL.createObjectURL生成文件的臨時URL
var url = URL.createObjectURL(file);
// 獲取預覽圖片元素
var preview = document.querySelector('.preview');
// 在預覽圖片元素中顯示選中的圖片
preview.style.backgroundImage = 'url(' + url + ')';
});

在代碼中，使用document.querySelector獲取上傳表單元素，然后監聽change事件。在事件處理函數中，使用e.target.files獲取選中的文件，使用URL.createObjectURL生成文件的臨時URL，將預覽圖片元素的backgroundImage屬性設置為選中圖片的URL。在代碼中，預覽圖片元素使用了class屬性為"preview"的元素。 完成了以上兩步，用戶在上傳頭像時就可以預覽選中的文件了。在服務端接收到上傳的文件后，可以進行處理或者保存。