通过 jQuery 和 FormData 的 Ajax POST 请求 - PHP 上的 $_POST 为空

Question

我希望使用 jQuery 和 FormData 通过 ajax 将图像上传到服务器。

我的jQuery代码如下

var formData = new FormData("form")[0];
  var fileName = $("#InputLogo")[0].files[0].name;

  $.ajax ( {
      url : 'upload.php',
      type : 'POST',
      data : { "data" : formData, "fileName" : fileName },
      processData : false,
      success : function(data) {
          console.log(data);
          alert(data);
      }
  });

当用户选择要上传的新文件时调用此代码。

我的服务器后端是 PHP，它按如下方式处理请求

$data = $_POST['data'];
$fileName = $_POST['fileName'];
$fp = fopen('/img/'.$fileName, 'w');
fwrite($fp, $data);
fclose($fp);
$returnData = array("data" => $data);
print_r($_POST);

POST 请求确实发生了，但 $_POST 仍然为空。

我尝试搜索解决方案，但找不到确切的解决方案。

任何建议将不胜感激。

编辑：这是 HTML 格式的表单

<form id=card-form" method="post" action="" >
      <div class="form-group">
    <label for="InputName">Name of the Company</label>
    <input type="text" class="form-control" id="InputName" placeholder="Enter a name">
    </div>
    <div class="form-group">
    <label for="InputEmail">Email</label>
    <input type="email" class="form-control" id="InputEmail" placeholder="Enter email">
    </div>
    <div class="form-group">
    <label for="InputLogo">Choose a company logo</label>
    <input type="file" id="InputLogo" accept="image/*">
    <p class="help-block">For good visibility, please limit the image to 200 x 200 px</p>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

Answer 1

FormData() constructor 不是选择器引擎，也不代表类似数组的集合，因此var formData 可能等于undefined。

要使用它，您必须先找到<form> 并将其传递给构造函数：

var form = $('form')[0];
var formData = new FormData(form);

如果<input type="file"> 在<form> 中，它应该已经包含在formData 中。但是，如果不是，你也可以.append()它：

var inputLogo = $("#InputLogo")[0];
formData.append(inputLogo.name, inputLogo.files[0]);

并且，将formData 设置为正在发送的data，告诉jQuery 不要为其假设contentType：

// ...
    data : formData,
    contentType : false,
    processData : false,
// ...

那么，fileSize 应该在 PHP 的 $_FILES collection 中可用：

$fileName = $_FILES['inputLogo']['name'];

Answer 2

我知道这是一篇旧帖子，但我在尝试为自己解决类似问题时遇到了它，并且没有任何回复指出这个问题，所以我发布回复以防其他人发现他/她自己同样的情况。

事实证明，正如另一篇 StackOverflow 帖子中所述：

Does form data still transfer if the input tag has no name?

如果您的文件输入元素没有非空名称属性，则不会在请求中发送来自该元素的数据。

所以你的输入元素：

<input type="file" id="InputLogo" accept="image/*">

应该是：

<input type="file" id="InputLogo" accept="image/*" name="yourfieldnamehere">

否则文件将不会与表单数据一起发送。

Answer 3

我也尝试了很多方法：

var formData = new FormData("form")[0];
var formData = new FormData("form");
var formData = new FormData($('form-id'));
var formData = new FormData(this);

它们都不适合我。 但最后，我使用了一种获取 elementById 的 javascript 方式，并且效果很好。

formdata = new FormData(document.getElementById('form_id'))

通常在请求标头中，您会找到如下所示的加密文本： 多部分/表单数据；边界=----WebKitFormBoundaryUuVvGDydAdTf3Bmp

当您尝试提醒表单数据时，它将显示 [object formdata]。这意味着 formdata 函数工作正常。

当您返回$_POST、$_REQUEST 或$_FILES 的值时，如果它为空，则表示formdata 无法访问所提供的表单元素。所以首先你必须确认formdata是否能够访问表单元素，然后尝试其他可能性。

Answer 4

在将 formData 与 ajax 结合使用时，您需要考虑的事项很少。您可以使用 FormData 的 append() 方法将数据附加到 FormData。

试试这个..

 var formData = new FormData("form")[0];
 formData.append("fileName",$("#InputLogo")[0].files[0].name);

 $.ajax ( {
   url : 'upload.php',
   type : 'POST',
   data : formData,
   processData: false,  // tell jQuery not to process the data
   contentType: false,   // tell jQuery not to set contentType
   success : function(data) {
      console.log(data);
      alert(data);
   }
});

reference

Answer 5

一个问题是，除非您利用一些 HTML5 优势，否则通过 Ajax 上传文件是行不通的。

这是一个描述它的粘性帖子： How can I upload files asynchronously?