html5修改用户头像功能代码

要实现用户上传和修改头像的功能，需要使用 HTML5 中的 `<input>` 元素和 JavaScript 来实现。以下是一个简单的示例代码：

HTML 代码：

<form id="avatar-form">
  <label for="avatar-input">上传头像：</label>
  <input type="file" id="avatar-input" accept="image/*" onchange="previewAvatar(event)">
  <br>
  <img id="avatar-preview" src="" alt="Avatar Preview">
  <br>
  <button type="submit">保存头像</button>
</form>

这段代码包含一个表单，其中包含一个文件输入框、一个图像预览框和一个保存按钮。文件输入框可以让用户选择他们想要上传的头像文件，图像预览框用于在用户选择文件后预览头像，保存按钮用于将头像保存到服务器。

JavaScript 代码：

function previewAvatar(event) {
  var input = event.target;
  var preview = document.getElementById('avatar-preview');
  var file = input.files[0];
  var reader = new FileReader();

  reader.onload = function() {
    preview.src = reader.result;
  };

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = '';
  }
}

document.getElementById('avatar-form').addEventListener('submit', function(event) {
  event.preventDefault();
  var preview = document.getElementById('avatar-preview');
  var image = new Image();
  image.src = preview.src;

  // 将 image 发送到服务器保存
});

这段代码包含两个函数。`previewAvatar` 函数用于在用户选择头像文件后预览头像。它首先获取用户选择的文件对象，然后使用 `FileReader` 对象将文件内容读取为数据 URL 格式，并将其设置为图像预览框的 `src` 属性。`addEventListener` 函数用于在表单提交时将头像发送到服务器保存。你需要将这段代码中的注释部分替换为将图像发送到服务器的代码。