在本地主机上使用 XMLHttpRequest 进行文件上传不会触发 PHP 脚本

Question

我正在尝试使用 php 和 XMLHttpRequest 获得一个简单的上传系统。但是我无法使用请求实现目标。它不起作用..

这是我用于获取图像文件的 HTML 表单：

<form action="../session/uploader.php" method="post" enctype="multipart/form-data" id="uploadForm">

    Select image to upload:

    <input type="file" name="fileToUpload" id="fileToUpload">

    <input type="submit" value="Upload Image" name="submit">

</form>

这是我的 PHP 脚本，它将图像保存到我的文件系统中：

<?php

if(isset($_POST["submit"])) {

    $target_dir = "../db/";

    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

    move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);

}

?>

现在这工作得很好，但我想使用 XMLHttpRequest 以便在上传图像时不需要刷新页面。我试图做一些看起来很简单的事情，但没有奏效。

首先，我将 PHP 更改为：

<?php

$target_dir = "../db/";

$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);

?>

在 HTML 表单的正下方，我添加了一些 Javascript 来生成 XMLHttpRequest 并发送它：

<script>

    const uploadForm = document.getElementById("uploadForm");

    uploadForm.addEventListener("submit", function(e) {

        e.preventDefault();

        const xhr = new XMLHttpRequest();

        xhr.open("POST", "../session/uploader.php", true);  

        xhr.setRequestHeader("Content-Type", "multipart/form-data");    

        xhr.send(new FormData(uploadForm));                 

    });

</script>

这里的问题是它根本不起作用。没发生什么事。我没有得到任何反馈。就像没有调用 uploader.php 脚本一样。

有谁知道可能是什么问题？

Answer 1

if(isset($_POST["submit"]))提交按钮不会包含在此处的表单提交数据集中，就像您刚刚“正常”发送表单一样。xhr.send(new&nbsp;FormData(uploadForm));浏览器此时不知道您单击了提交按钮来实际触发整个过程 - 因此它将只包含fileToUpload文件上传字段的数据，而不包含提交按钮。您可以添加一个隐藏字段，然后检查它是否在 $_POST 中设置，或者您检查是否fileToUpload直接设置（但请记住，该字段将在 $_FILES 中，而不是 $_POST 中。）xhr.setRequestHeader("Content-Type",&nbsp;"multipart/form-data");一个适当的多部分请求还需要在此标头中包含将用于分隔请求正文中的部分的边界。使用 FormData，这应该会自动添加，所以删除这一行 - 它用此时不完整的标题覆盖正确的标题。