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

问题描述

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

I wish to upload an image to the server via ajax using jQuery and FormData.

我的jQuery代码如下

My jQuery code is as follows

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

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

This code is called when the user selects a new file to upload.

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

MY server backend is PHP and it handles the request as follows

$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 仍然为空.

The POST request does occur, but $_POST remains empty.

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

I tried searching for the solution but couldn't find an exact one.

任何建议将不胜感激.

这是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()构造函数不是选择器引擎，也不表示类似数组的集合，因此var formData可能等于undefined.

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

To use it, you'll have to find the <form> first and pass it to the constructor:

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

如果<input type="file">在<form>内，则它应该已经包含在formData中.但是，如果不是这样，您也可以 .append() 它:

If the <input type="file"> is within the <form>, it should already be included in formData. But, if it isn't, you can also .append() it:

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

然后，将formData设置为要发送的data，告诉jQuery不要为此假设contentType:

And, set formData as the data being sent, telling jQuery not to assume a contentType for it:

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

然后，fileSize应该在PHP的 $_FILES集合中可用:

Then, the fileSize should be available in PHP's $_FILES collection:

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

这篇关于通过jQuery和FormData的Ajax POST请求-$ _POST在PHP上为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！