AJAX PHP上传文件问题

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <input type="button" value="上传" onclick="uploadFile()">
</form>
<div id="progress"></div>

function uploadFile() {
  var fileInput = document.getElementById("fileInput");
  var file = fileInput.files[0];
  
  var formData = new FormData();
  formData.append("file", file);
  
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "upload.php", true);
  
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var percent = Math.round((e.loaded / e.total) * 100);
      document.getElementById("progress").innerHTML = percent + "%";
    }
  };
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById("progress").innerHTML = "上传完成";
    } else {
      document.getElementById("progress").innerHTML = "上传失败";
    }
  };
  
  xhr.send(formData);
}

<?php
$file = $_FILES["file"];
$targetDir = "uploads/";
$targetFile = $targetDir . basename($file["name"]);

if (move_uploaded_file($file["tmp_name"], $targetFile)) {
  echo "文件上传成功";
} else {
  echo "文件上传失败";
}
?>