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

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

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

当用户选择要上载的新文件时，将调用此代码

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

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

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

POST请求确实发生，但$\u 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>

---

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

下面是一篇描述它的文章：
当使用Ajax使用FrimDATA时，您需要考虑的事项很少。您可以使用<数据> <代码> < /P> >使用<代码>附录（）/代码>方法将数据追加到FraveDATA中。
试试这个

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

 $.ajax ( {
   url : 'upload.php',
   type : 'POST',
   data : formData ,
   processData : false,
   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);
   }
});

不是选择器引擎，也不表示类似数组的集合，因此
var formData
可能等于
未定义的

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

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

如果
在
中，则它应该已经包含在
表单数据中。但是，如果不是，您也可以：

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

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

然后，
文件大小
应该在PHP中提供：

我知道这是一篇老文章，但我在尝试为自己解决类似问题时遇到了它，并且没有任何回复指出了这个问题，因此我在发布回复，以防其他人发现他/她处于相同的情况

事实证明，正如另一篇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'))

通常，在请求头中，您会发现如下所示的加密文本：
多部分/表格数据；边界=----WebKitFormBoundaryUUVGDYDADTF3BMP

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

返回$\u POST、$\u REQUEST或$\u FILES的值时，如果为空，则表示formdata无法访问提供的表单元素。因此，首先必须确认formdata是否能够访问表单元素，然后尝试其他可能性
 您还可以发布表单的HTML以确保所有内容都正确无误。您想在jQuery文档中查找
processData
选项的作用…@AgnosticDev我已经添加了表单HTML@CBroe创建表单时，我正在重新传递到。我认为
processData
不是问题所在。我更正了
FormData
构造函数，并尝试从您提到的
$\u文件中派生文件名。它还不起作用。我尝试打印
$\u文件的转储文件。它也是空的。因此，
$\u GET
和
$\u REQUEST
对我来说也是一样的。。你找到解决办法了吗？是的，我正在遵循你提到的相同参考资料。似乎还不起作用。如果没有contentType jquery，则会将数据作为原始数据发送。由于必须提供“#”id选择器，因此需要使用此选项。var formData=new formData（$（'#form id'）；