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"的元素。 完成了以上两步，用户在上传头像时就可以预览选中的文件了。在服务端接收到上传的文件后，可以进行处理或者保存。