AJAX 文件上传后 $_POST 和 $_FILES 为空答案

【问题标题】：$_POST and $_FILES empty after AJAX file uploadAJAX 文件上传后 $_POST 和 $_FILES 为空
【发布时间】：2016-08-03 15:17:49
【问题描述】：

我是 Web 开发的新手，最近遇到的问题是 ajax 文件上传...

现在我有两个 HTML 输入字段；一个文件输入和一个按钮。

<input type="file" name="Frame" id="Frame_"/>
<input type="button" name="FrameButton" id="FrameButton_" value="UPLOAD"/>

单击按钮后，我会调用具有以下代码的函数..

var frame = document.getElementById('Frame_');
var frameImg = frame.files[0];
var form_data = new FormData();

form_data.append('frame', frameImg);

jQuery.ajax({
    url : './handler.php',
    type : 'post',
    data  :  form_data
    contentType : false,
    processData : false,
    success : alert("Frame Uploaded")
});

当我对 $_POST 和 $_FILES 数组进行 var_dump() 时，它会将两个数组都显示为空。尽管 Chrome Dev 阅读中的“请求有效负载”

内容配置：表单数据；名称=“框架”；文件名="GoldFrame.jpg"

内容类型：图片/jpeg

我的印象是，这意味着我在前端选择的文件的信息正在成功地“发布”到我的 handler.php 文件中。这是一个错误的解释吗？

无论哪种方式，有人可以回答我的问题吗？或者至少指向一个可能有我答案的资源？似乎有很多类似的问题，但我还没有看到一个有可靠答案的问题。

我过去曾将 iframe 用于此类事情，但这似乎是一种非常 hacky 的方法，我希望将来可以灵活地使用 ajax 来完成此类任务。

感谢您的帮助。

【问题讨论】：

这里；访问php.net/manual/en/function.error-reporting.php，然后将其应用于您的代码。还要检查您的控制台。
您设置了错误的内容类型，这意味着 jquery 不发送任何类型。如果 PHP 没有看到合适的类型进入，它不会假设表单/文件提交，也不会解析/填充 $_POST/$_FILES 的输入。您还将 processData 设置为 false，因此您传入的对象也不被处理为正常提交。
检查文件上传的内容类型。你有一个错误。之后，您可以从浏览器控制台检查 Ajax 调用是否正确。如果它给出了错误，那么你应该检查一下。
如果您的按钮在表单中，您需要停止表单提交，否则您的页面将在 AJAX 请求完成之前重新加载
你的表单元素上是否有enctype="multipart/form-data"？

标签： javascript php jquery ajax

【解决方案1】：

试试这个。

表单 (index.html)

<form id="uploadForm">
    <input type="file" name="frame" />
    <input type="submit" value="UPLOAD" />
</form>

脚本 (script.js)

$("#uploadForm").on('submit',(function(e) {
    e.preventDefault();
    $.ajax({
        url: "handler.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data){
            console.log(data);
        }           
    });
}));

服务器端 (handler.php)

<?php 

var_dump($_FILES);

【讨论】：

$_FILES 数组有文件！谢谢你。在我之前的解决方案中，我有两个输入标签，但它们没有包含在
中。这就是我的解决方案不起作用的原因吗？
是的，在使用 ajax 时，您必须停止默认提交表单并让 ajax 为您处理请求。
没有将 contentType 设置为 false 是我的问题。

【解决方案2】：

发布文件和/或文本时，这组代码也可用于调试目的。您可以使用它来查看您的帖子是否太大，因为即使发布了也会导致空的 $_POST 和 $_FILE 数组。

    print_r($_POST); /* Looks at the $_POST array. (Will be empty if $_SERVER['CONTENT_LENGTH']/1000000 is greater than ini_get('post_max_size') ) */
    echo "<br>";
    print_r($_FILES); /* Looks at the $_FILES array. It will also show you the file size in bytes: divide it by 1 million (1000000) to get the megabytes value. (Will be empty if $_SERVER['CONTENT_LENGTH']/1000000 is greater than ini_get('post_max_size') ) */
    echo "<br>" . $_SERVER['CONTENT_LENGTH']/1000000 ; /* This will give you the size in megabytes of your $_POST */
    echo "<br>" . ini_get('post_max_size'); /*This will show you the post_max_size in your php.ini file*/
    echo "<br>" . ini_get('upload_max_filesize'); /*This will show you the upload_max_filesize in your php.ini file*/
    // phpinfo(); // You might not need this function but you can use it for more information on your php.ini file. It can help you find its location (for maybe editing purposes) and view its data.

【讨论】：

【解决方案3】：

您是否在 handler.php 文件中对 $_FILES/$_POST 数组进行了 var_dump() 处理？

如果您试图将这些变量转储到具有 ajax 调用的文件中，它将无法工作，因为 AJAX 正在进行前端调用，并且文件/post 变量是服务器端变量......这意味着只有 handler.php 文件才有这些变量可用。

尝试在 handler.php 中添加 var_dump() 调用，并在 ajax 调用中输出结果，我希望你会看到你正在寻找的结果。

【讨论】：

感谢您的回复。我目前正在使用 echo 'debuggin info'; var_dump($_POST); var_dump($_FILES);在我的 handler.php 文件的顶部，并在 chrome 开发人员控制台的网络选项卡中接收结果。如果我打印来自 ajax 调用的输出，结果会有所不同吗？
不，它们应该是一样的。好的。您可以发布 handler.php 脚本代码吗？这将有助于调试。