Question

这应该是一个简单的解决方法，但是我必须缺少一些东西。我一直在寻找Stack Overflow和Google了一段时间，但是没有运气。在过去的项目中，我没有使用Ajax，但是这样做会使我当前的项目变得更好。我可以通过Ajax提交其他表格。问题在于文件上传。

这是问题所在：Apache运行PHP时，它没有像通常那样填充$_POST和$_FILES变量，但是原始数据存在于php://input中。我的目标是让Apache / PHP通常对此进行处理，以便能够访问$_FILES中的文件和$_POST

中的其他表单数据

我在这里错过了什么吗？有没有办法使用Ajax / XHR来工作，还是我不得不放弃该文件上传轨道？

我有一个简单的HMTL表格：

<form action="files/upload.php" method="post">
    <input type="file" name="file">
    <input type="text" name="text">
</form>

这是我发送表单时调用的JavaScript：

// ...
// (Code that populates the form, url, and type variables)
// ...

var data = new FormData(form);

$.ajax({
    url: url,
    type: type,
    data: data,
    dataType: 'json', // expected response type
    // cache: false, // this didn't change the outcome
    processData: false,
    contentType: false, // have also tried 'x-www-form-urlencoded' and 'multipart/form-data'
    success: function() { /* ...code... */ }
}

这是我的调试PHP：

<?php
var_dump($_POST);
var_dump($_FILES);
var_dump(file_get_contents('php://input'));
?>

在“文本”字段中输入“ 123456”，结果是：

array(0) {
}
array(0) {
}
string(289) "------WebKitFormBoundaryqcOElDa6F9aoBlux
Content-Disposition: form-data; name="samples"; filename="test.txt"
Content-Type: text/plain

ABCDEFG
------WebKitFormBoundaryqcOElDa6F9aoBlux
Content-Disposition: form-data; name="text"

123456
------WebKitFormBoundaryqcOElDa6F9aoBlux--
"

其他（可能很重要）详细信息：

我正在我的VM上运行此文件（而不是在公开站点上）
操作系统：Ubuntu 16.04
Apache Vesion：2.4.18
PHP版本：7.0.32
JQuery版本：3.3.1
浏览器：Chrome 70
我的用户群很小，使用的是现代浏览器，因此不必担心旧浏览器的兼容性。
我想避免添加另一个插件来尽可能地做到这一点（试图避免不必要的依赖）。
如果可能的话，我也想避免“隐藏iframe作为模拟异步请求的目标”解决方案，只是为了保持整洁（但我愿意在必要时采用该解决方案）。

已检查的重要来源（除其他外）：

How to use FormData for ajax file upload
How can I upload files asynchronously?
This Fiddle from a related question（我尝试修改表单URL以发布到我的VM的IP地址并获得相似的结果）

Answer 1

我找到了问题所在！我正在使用变量在ajax调用中填充contentType（contentType: contentType）。我在传递false作为值，但是在检查之间确保代码不是空字符串（''）的第一步，如果为空，则分配x-www-form-urlencoded。

问题是我在检查中使用了!=运算符而不是!==运算符。因此，false与''相匹配，并且它实际上将contentType的值分配为x-www-form-urlencoded而不是false。我更改为正确的运算符，并且它可以正常工作。

对于其他有类似问题的人，请使用上面列出的资源。如果您的调用没有意义，请确保您使用了调试工具，并在花了太长时间感到沮丧之前，暂停了ajax调用以查看变量的值。如果您有contentType: false，并且FormData对象中有一个文件，则JQuery会在进行调用时自动正确设置Content-Type头。

如何使用Ajax和PHP上传文件（带有/不带有其他表单数据）？

1 个答案: