通过表单和 XMLHttpRequest 异步上传文件到服务器

我只需要使用 vanilla.js 上传文件，不允许使用任何框架。

形式：

<form id="fileUploadForm" action="fileUpload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
</form>

我将按钮放在表单之外，因为它位于 HTML 中的另一个位置。

<button id="btnUpload">Upload</button>

这是上传脚本。我正在使用FormData来获取表单数据，如本答案中所述。

<script>

document.getElementById("btnUpload").addEventListener("click", function() {
    fileUpload("fileUploadForm");
});

function fileUpload(pFormId) 
{
    debugger;
    var form = document.getElementById(pFormId);
    var formData = new FormData( form );  //returns no data!

    var request = getHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
              console.log("Response Received");
              document.getElementById("debug").innerHTML = request.responseText;

        }
    };
    request.open("POST", "fileUpload.php", true);
//    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.setRequestHeader("Content-type","multipart/form-data");
    formData.append("action","test");  //Add additional POST param
    request.send(formData);
}

function getHttpRequest() 
{
    let xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlhttp;
}
</script>

我正在使用此处的 PHP 上传脚本。

<?php

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
     echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}

我将调试器附加到我的 javascript 并发现它formData是空的并且不包含该文件。

这是我从 PHP 得到的：

抱歉，文件已经存在。

抱歉，只允许使用 JPG、JPEG、PNG 和 GIF 文件。抱歉，您的文件未上传。

即使该文件确实不是已经存在，文件格式为JPG。

更新：

这是我在开发者控制台网络选项卡中得到的：

Request Payload:
------WebKitFormBoundaryKjnjAyPoCQ7MU1x6
Content-Disposition: form-data; name="fileToUpload"; filename="Koala.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryKjnjAyPoCQ7MU1x6--

我感谢任何帮助！