时间戳

首页 > 解决方案 > 在 Localhost 上使用 XMLHttpRequest 进行文件上传不会触发 PHP 脚本

javascript - 在 Localhost 上使用 XMLHttpRequest 进行文件上传不会触发 PHP 脚本

问题描述

我正在尝试使用 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 脚本一样。

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

标签： javascriptphphtmlxmlhttprequest

解决方案

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

提交按钮将不会包含在此处的表单提交数据集中，就像您刚刚“正常”发送表单一样。

xhr.send(new FormData(uploadForm));

浏览器此时不知道您单击提交按钮实际上触发了整个过程 - 所以它只会包含fileToUpload文件上传字段的数据，而不包括提交按钮。

您可以添加一个隐藏字段，然后检查是否在 $_POST 中设置，或者检查是否fileToUpload直接设置（但请记住，该字段将在 $_FILES 中，而不是 $_POST 中。）

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

适当的多部分请求还需要在此标头中包含将用于分隔请求正文内的部分的边界。

使用 FormData，这应该会自动添加，因此删除此行 - 它正在用此时此处不完整的标题覆盖正确的标题。

推荐阅读