通过jQuery和FormData的Ajax POST请求-PHP上的$_POST为空 - Ajax POST request via jQuery and FormData - $_POST empty on PHP

我希望使用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>

FormData()构造函数不是选择器引擎，也不表示类似Array的集合，因此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集合中可用：

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

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

事实证明，正如另一篇StackOverflow文章中所记录的那样：

如果输入标签没有名称，表单数据是否仍会传输？

如果您的文件输入元素没有非空的name属性，那么在请求中不会发送该元素中的任何数据。

所以你的输入元素：

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

应为：

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

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

我也尝试了很多以下方法：

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

他们都不为我工作。但最后，我使用了一种javascript方法来获取elementById，它非常有效。

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

通常在请求标头中，您会发现一个加密文本，如下所示：多部分/表单数据；boundary=----WebKitFormBoundaryUuVvGDydAdTf3Bmp

当你试图提醒表单数据时，它会显示[对象表单数据]。这意味着formdata函数运行良好。

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

在将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);
   }
});

参考

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

下面是一篇描述它的帖子：如何异步上传文件？