如何用AJAX和PHP上传图片？

<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
  <input type="file" id="fileInput" name="image">
  <button type="submit">上传</button>
</form>

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append('image', file);
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  
  xhr.send(formData);
});

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['image'])) {
  $file = $_FILES['image'];
  
  // 定义保存路径和文件名
  $uploadDir = 'uploads/';
  $filename = uniqid() . '_' . $file['name'];
  $uploadPath = $uploadDir . $filename;
  
  // 将文件从临时目录移动到指定路径
  if (move_uploaded_file($file['tmp_name'], $uploadPath)) {
    echo '文件上传成功';
  } else {
    echo '文件上传失败';
  }
}
?>