在现代Web开发中，上传图片是一项非常常见且重要的操作。使用AJAX技术实现图片上传可以提供更好的用户体验，使得页面无需刷新就能够上传图片，并且可以实时显示上传进度，给用户提供更友好的操作界面。本文将介绍如何使用AJAX技术将图片上传到PHP服务器，并给出具体的代码实例。

在实际开发中，我们常常会遇到需要用户上传头像或者图片的需求。使用AJAX技术上传图片的好处是能够在图片上传的过程中，给用户提供实时的进度反馈，以及在上传完成后，可以立即在页面上显示上传的图片。这样的用户体验对于一个现代化的Web应用来说是非常重要的。

下面是一个简单的例子，通过AJAX上传图片到PHP服务器，并在上传完成后在页面上显示上传的图片。首先，我们需要在HTML页面中放置一个上传按钮和一个用于预览上传图片的元素：

<input type="file" id="uploadFile" />
<img id="preview" src="" alt="" />

然后，在JavaScript中使用AJAX发送图片给PHP服务器。我们首先需要监听元素的change事件，获取用户选择的图片：

var fileInput = document.getElementById("uploadFile");
fileInput.addEventListener("change", function() {
var file = fileInput.files[0];  // 获取用户选择的图片文件
var formData = new FormData();  // 创建一个FormData对象
formData.append("upload", file); // 添加图片文件到FormData对象
});

在FormData对象中，我们可以使用append()方法将需要上传的图片添加进去。接下来，我们需要通过AJAX发送FormData对象到PHP服务器：

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);  // 指定上传的URL
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);   // 解析服务器返回的JSON数据
document.getElementById("preview").src = response.imageURL;  // 在页面上显示上传的图片
}
};
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;   // 计算上传进度
console.log(percentComplete + "% uploaded");
}
};
xhr.send(formData);  // 发送FormData对象

在这段代码中，我们创建了一个XMLHttpRequest对象xhr，并通过open()方法指定了上传的URL。在xhr的onreadystatechange事件中，如果请求的状态为4（已完成），响应的状态为200（OK），我们解析服务器返回的JSON数据，并将图片的URL赋值给页面上的元素的src属性，从而实现图片的预览。

另外，我们还在xhr的upload.onprogress事件中计算并输出上传进度，这样用户可以实时了解图片上传的情况。

最后，在PHP服务器端，我们需要处理图片的上传请求，将上传的图片保存到指定的目录中，并返回图片的URL给客户端。以下是一个简单的upload.php脚本的示例：

$targetFile);
echo json_encode($response);
}
}
}
?>

在upload.php中，我们首先判断是否有名为"upload"的文件上传。然后，我们指定一个目标目录将文件保存起来，使用move_uploaded_file()函数将文件从临时目录中移动到目标目录。最后，我们返回一个包含图片URL的JSON数据给客户端。

通过以上的代码示例，我们可以看到如何使用AJAX技术将图片上传到PHP服务器，并在页面上实时预览上传的图片。这种利用AJAX实现图片上传的方式能够极大地提高用户体验，为现代Web应用的开发提供了更多可能性。