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

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'];