如何使用Ajax和PHP上传文件(带有/不带有其他表单数据)?

时间:2018-10-23 20:28:03

标签: php jquery ajax apache upload

这应该是一个简单的解决方法,但是我必须缺少一些东西。我一直在寻找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作为模拟异步请求的目标”解决方案,只是为了保持整洁(但我愿意在必要时采用该解决方案)。

已检查的重要来源(除其他外):

1 个答案:

答案 0 :(得分:1)

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

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

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