Ajax XMLHttpRequestUpload 返回 null 和“progress”eventListener 即使文件已上传也无法正常工作

Question

为了学习更多的 JavaScript 和 PHP，我目前正在做一个小型私人项目，它允许我通过 PHP 将单个或多个文件上传到我的服务器。文件通过 Ajax 发送到 PHP 脚本。如果我上传多个文件，我会通过 Ajax 将一个文件一个接一个地循环发送到 PHP 脚本。因为我想让上传的视觉部分更具吸引力，所以我通过 xhr.upload 添加了一个进度条和一个“progress”事件监听器，它在不久前运行良好。

然而，一段时间以来第一次上传文件后，我发现进度条不再起作用了。与此同时，功能周围的代码当然已经扩展，但功能本身保持不变。此外，将文件上传到服务器完美无缺，我没有收到任何错误。

在几个控制台输出之后，很快就清楚 xhr.upload 函数只返回“空”值（见下面的截图）。我猜“进度”事件监听器没有触发也是因为这个？

我正在使用 php 8.0.8，我正在使用 MAMP 作为我的本地主机。 我在 Chrome 和 Safari 中测试过。

这是我的 JavaScript 函数，我使用它通过 Ajax 将文件发送到我的 upload.php：

let percentComplete = [];
let xhr = [];
let j = 0;

function uploadFiles() {
    text.innerHTML = "Sendet ...";
    
    $("#mssgBox").css({ 'display': 'block', 'bottom': '0' });

    let formData = new FormData();
    formData.append('file[]', fileListArr[j]);
    let progressbarID = $(".progressbar_" + id[j]);
    $.ajax({
        url: "../upload.php",
        type: "POST",
        xhr: function () {
            xhr[j] = new XMLHttpRequest();
            console.log(xhr[j]);
            xhr[j].upload.addEventListener("progress", function (e) {
                console.log(e.loaded + ' & ' + e.total + ' & ' + Math.floor((e.loaded / e.total) * 100));
                progressbarID.css({ "width": Math.floor((e.loaded / e.total) * 100) + '%' });
                //notifyMe('Uploading', Math.floor((e.loaded / e.total) * 100));
            }, false);
            return xhr[j];
        },
        error: function (error) {
            text.innerHTML += '<br/>Error: ' + error;
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    }).done(function (respond) {
        text.textContent = '';
        text.innerHTML += respond + '<br/>';
        console.log(respond);
        notifyMe(respond, '100');

        j = j + 1;
        if (j < fileListArr.length) {
            uploadFiles();
        } else {
            j = 0;
        }

        $("#uploadedFiles").load("filesuploaded.php");
    });
}

我的upload.php:

<?php
session_start();
include('assets/imgResize.php');
$total_count = count($_FILES['file']['name']);

$phpFileUploadErrors = array(
  0 => 'ACHTUNG: There is no error, the file uploaded with success',
  1 => 'ACHTUNG: The uploaded file exceeds the upload_max_filesize directive in php.ini',
  2 => 'ACHTUNG: The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form',
  3 => 'ACHTUNG: The uploaded file was only partially uploaded',
  4 => 'ACHTUNG: No file was uploaded',
  6 => 'ACHTUNG: Missing a temporary folder',
  7 => 'ACHTUNG: Failed to write file to disk.',
  8 => 'ACHTUNG: A PHP extension stopped the file upload.',
);

for ($i = 0; $i < $total_count; $i++) {
  if ($_FILES["file"]["error"][$i] > 0) {
    $errorCode = $_FILES["file"]["error"][$i];
    echo $phpFileUploadErrors[$errorCode];
  } else {
    if (file_exists("upload/" . $_SESSION['userUid'] . '/' . str_replace(' ', '_', $_FILES["file"]["name"][$i]))) {

      echo "ACHTUNG: " . $_FILES["file"]["name"][$i] . " existiert bereits.<br/>";

    } else {

      if (imageType($_FILES["file"]['tmp_name'][$i])) {
        $image = scaleImageFileToBlob($_FILES['file']['tmp_name'][$i], 'thumb_' . $_SESSION['userUid'] . '_' . str_replace(' ', '_', $_FILES["file"]["name"][$i]));
        if ($image == '') {
          echo 'ACHTUNG: Image type not supported';
        }

      }

      $uploadFile = move_uploaded_file($_FILES["file"]["tmp_name"][$i], "upload/" . $_SESSION['userUid'] . '/' . str_replace(' ', '_', $_FILES["file"]["name"][$i]));
      if ($uploadFile) {
        echo $_FILES["file"]["name"][$i] . " erfolgreich hochgeladen";
      } else {
        echo "ACHTUNG: Fehler beim hochgeladen von " . $_FILES["file"]["name"][$i];
      }
    }
  }
}
?>

有人能告诉我为什么我的 xhr.upload 只得到空值吗？

另外，如果您需要更多信息，我会提供给您。

提前致谢:)

附言我可以想象，像我一样在循环中执行多个 ajax 请求可能不是最佳选择，但这是我设法为每个上传文件获得一个进度条的唯一方法。