Javascript 通过表单和XMLHttpRequest将文件异步上载到服务器

我只需要使用vanilla.js上传一个文件，不允许使用框架

表格：

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

我正在使用来自的PHP上载脚本

---

谢谢你的帮助

只需删除

内容类型

标题，当使用

FormData

时，浏览器将自动设置该标题。这样，内容类型还将包含用于分隔表单数据的表单边界（类似于分隔有效负载数据的WebKitFormBoundaryKjnjAyPoCQ7MU1x6--）。

我会稍微修改代码

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

您正在

单击
绑定事件。我会修改它，并在表单中附加一个
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
});

免责声明：我根本没有测试它，所以不要复制粘贴，希望它能工作
 检查浏览器发送的内容。F12>网络>单击请求并检查参数名称。很好的提示！我更新了我的问题。当通过
FormData
@MartinAdámek上传时，你不应该设置
内容类型
标题，啊好吧，现在我得到
对不起，你的文件太大了。对不起，你的文件没有上传。
在评论
请求后。setRequestHeader（“内容类型”，“多部分/表单数据”）退出！谢谢但该文件只有750KB大：/？该文件的大小是多少？您可能通过测试达到了
500000
的限制。除非您删除
内容类型
标题，否则此操作将不起作用。问题不在于将表单引用传递给
FormData
构造函数，这一部分很好（参见MDN，它们在示例中使用相同的代码）。@MartinAdámek很公平！谢谢你的更正。
<?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.";
    }
}

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


------WebKitFormBoundaryKjnjAyPoCQ7MU1x6--

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

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
});

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);
}