JavaScript实现更换头像功能

下面是JavaScript实现更换头像功能的完整攻略：

步骤一：在HTML中添加文件上传表单元素

在HTML中添加文件上传表单元素，可以使用<input>标签来实现：

<form enctype="multipart/form-data">
  <input type="file" name="avatar">
  <button type="submit">上传头像</button>
</form>

其中，enctype="multipart/form-data"表示表单数据包含二进制数据文件，type="file"表示上传文件，name="avatar"表示文件上传到服务器后端标识的名称。

步骤二：使用JavaScript获取上传的文件

在表单提交的时候，获得被上传的文件可以通过文件表单元素的files属性来实现，可以使用JavaScript监听表单的submit事件，获取到上传的文件。

document.querySelector('form').addEventListener('submit', event => {
  event.preventDefault(); // 阻止表单默认提交行为
  const file = document.querySelector('input[type="file"]').files[0];
  console.log(file);
});

以上代码中，addEventListener方法用于监听表单的submit事件，event.preventDefault()防止表单默认的提交请求，document.querySelector方法获取表单元素和文件上传表单元素，files[0]表示获取第一个文件。

步骤三：使用FormData对象将文件上传到服务器

在JavaScript中，可以使用FormData对象将文件上传到服务器端。FormData对象可以通过表单元素获取，也可以直接创建一个空的FormData对象。

const formData = new FormData();
formData.append('avatar', file);

以上代码中，append方法用于向FormData对象中添加文件，'avatar'表示文件上传到服务器端标识的名称，file是表单上传的文件。

将FormData对象通过AJAX方式上传到服务器端可以使用XMLHttpRequest对象，或直接使用HTTP封装库，例如axios或jQuery等。

示例1：使用XMLHttpRequest将文件上传到服务器

document.querySelector('form').addEventListener('submit', event => {
  event.preventDefault();
  const file = document.querySelector('input[type="file"]').files[0];
  const formData = new FormData();
  formData.append('avatar', file);
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('上传成功');
    }
  };
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
});

以上代码中，使用POST方法将FormData对象上传到服务器端，/upload为上传的URL地址。

示例2：使用axios将文件上传到服务器

document.querySelector('form').addEventListener('submit', event => {
  event.preventDefault();
  const file = document.querySelector('input[type="file"]').files[0];
  const formData = new FormData();
  formData.append('avatar', file);
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(() => {
    console.log('上传成功');
  }).catch(error => {
    console.log(error);
  });
});

以上代码中，使用axios.post方法上传FormData对象到服务器端，'/upload'是上传的URL地址，Content-Type为multipart/form-data表示发送的是文件数据。