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

Question

我只需要使用 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 获取表单数据，如this answer 中所述。

<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>

我正在使用来自here 的 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--

感谢您的帮助！

Answer 1

只需删除content-type 标头，使用FormData 时浏览器会自动设置该标头。这样 content-type 也将包含用于分隔表单数据的表单边界（像 ------WebKitFormBoundaryKjnjAyPoCQ7MU1x6-- 这样分隔有效负载数据的东西）。

Answer 2

我会稍微修改一下代码。

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

您将事件绑定到click。我会修改它并将submit 事件附加到表单。

闭包将事件目标作为回调：

document.getElementById("fileUploadForm").addEventListener("submit", function(e) { // <- pay attention to parameter

    e.preventDefault(); // Prevent the default action so we stay on the same page.
    fileUpload(e); // pass the event to your function
});

现在，开始你的fileUpload 函数。

function fileUpload(e) 
{
    debugger;
    var formData = new FormData( e.target );  // pass the event target to FormData which serializes the 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","multipart/form-data");
    request.send(formData);
}

免责声明：我根本没有对此进行测试，所以不要复制粘贴并期望它可以工作！