javascript - 通过表单和 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 header ，使用 FormData 时，浏览器将自动设置该 header 。这样，内容类型还将包含用于分隔表单数据的表单边界(例如分隔有效负载数据的 -----WebKitFormBoundaryKjnjAyPoCQ7MU1x6-- )。