在PHP中上传文件时，如何防止页面重新加载而什么也不做？

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="button" value="Upload" onclick="uploadFile()">
</form>

<script>
  function uploadFile() {
    var form = document.getElementById("uploadForm");
    var formData = new FormData(form);
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        // 处理上传成功的逻辑
      }
    };
    xhr.send(formData);
  }
</script>

<form action="upload.php" method="post" enctype="multipart/form-data" target="hiddenFrame" id="uploadForm">
  <input type="file" name="file">
  <input type="submit" value="Upload">
</form>
<iframe name="hiddenFrame" style="display: none;"></iframe>

<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>

<script>
  function uploadFile() {
    var file = document.getElementById("fileInput").files[0];
    var chunkSize = 1024 * 1024; // 每个文件块的大小（1MB）
    var totalChunks = Math.ceil(file.size / chunkSize); // 文件块的总数

    var currentChunk = 0;

    function uploadChunk() {
      var start = currentChunk * chunkSize;
      var end = Math.min(start + chunkSize, file.size);

      var chunk = file.slice(start, end);
      var formData = new FormData();
      formData.append("file", chunk);

      var xhr = new XMLHttpRequest();
      xhr.open("POST", "upload.php", true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          currentChunk++;

          if (currentChunk < totalChunks) {
            uploadChunk(); // 继续上传下一个文件块
          } else {
            // 上传完成的逻辑
          }
        }
      };
      xhr.send(formData);
    }

    uploadChunk(); // 开始上传第一个文件块
  }
</script>