ajax上传头像显示_ajax请求头：示例代码

Ajax上传头像是一种通过Ajax技术实现的动态上传头像的方式。在传统的表单提交中，上传文件需要刷新整个页面，而使用Ajax可以在不刷新页面的情况下实现文件的上传和显示。

要实现Ajax上传头像，首先需要定义一个文件上传的表单，并添加一个用于显示上传结果的容器。然后通过JavaScript代码来处理文件上传的逻辑。

我们需要监听文件上传表单的change事件，当用户选择了文件后，触发该事件。在事件处理函数中，我们可以通过FormData对象来获取用户选择的文件，并通过Ajax发送请求将文件上传到服务器。

示例代码如下：

<form id="uploadForm">
  <input type="file" id="avatar" name="avatar" accept="image/*">
</form>
<div id="result"></div>
<script>
  document.getElementById("avatar").addEventListener("change", function() {
    var file = this.files[0];
    var formData = new FormData();
    formData.append("avatar", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("result").innerHTML = "上传成功";
      }
    };
    xhr.send(formData);
  });
</script>

在上面的示例代码中，我们首先获取了文件上传表单的DOM元素，并给它添加了一个change事件的监听器。当用户选择了文件后，change事件会被触发，我们可以通过this.files[0]来获取用户选择的文件对象。

接下来，我们创建了一个FormData对象，并使用append方法将用户选择的文件添加到FormData中。FormData对象是用于封装表单数据的对象，可以方便地将文件和其他表单数据一起发送到服务器。

然后，我们创建了一个XMLHttpRequest对象，并使用open方法指定了请求的方法（POST）和URL（/upload）。在onreadystatechange事件处理函数中，我们判断了请求的状态和响应的状态码，如果都符合条件，就将上传结果显示在页面上。

我们通过send方法将FormData对象发送到服务器，完成文件上传的过程。

通过以上的示例代码，我们可以实现通过Ajax上传头像，并在上传成功后显示上传结果。这种方式可以提升用户体验，避免页面的刷新，实现了动态的文件上传和显示。