如何从 javascript FormData 访问 PHP 中提交的 ajax 数据

Question

我有以下代码通过 ajax post 上传文件以及 user_id 和令牌：

HTML 形式:

<?php foreach($model['all_documents'] as $doc=>$val){ ?>
<form enctype="multipart/form-data" class="form">
  <input type="hidden" name="_csrf" value="<?=Yii::$app->request->getCsrfToken()?>" />
  <input type="hidden" name="user_id" value="<?=$model['user_id']?>" />
  <button type="button" class="col-md-7 btn btn-default documentUpload form-control">
    <i class="fa fa-file-image-o"></i> انتخاب اسکن
  </button>
  <input type="file" name="<?=$doc?>" class="documentUpload" style="display: none;" />
  <button class="col-md-4 btn btn-primary form-control submit pull-left">
    <i class="fa fa-upload"></i> آپلود
  </button>
</form>
<?php } ?>

Javascript:

$(".form").submit(function(){
  var formData = new FormData(this);
  console.info(formData); // Shows FormData(), but can't find my stuff in it

  $.ajax({
    url: '<?=Yii::$app->homeUrl?>courier/upload-document',
    type: 'POST',
    data: formData,
    async: false,
    processData: false,
    // beforeSend: function(){
    // },
    success: function(data){
      console.log(data);
    }
  });
  return false;
});

我尝试访问 user_id 和文件，例如：

// $user_id = $_POST['user_id']; // Nothing
// $docs = $_FILES['image_url']; // Nothing
print_r($_POST);exit;

我在 chrome 的网络响应中得到的内容如下：

Array
(
    [------WebKitFormBoundaryk0378isAjf4Png8L
Content-Disposition:_form-data;_name] => "_csrf"

dy5nWlJFb1U6dwg.FwshCjZ5NANmd1tkFFcdFh8sLgcnQQQxZzwoOA==
------WebKitFormBoundaryk0378isAjf4Png8L
Content-Disposition: form-data; name="user_id"

456
------WebKitFormBoundaryk0378isAjf4Png8L
Content-Disposition: form-data; name="image_url"; filename="avatar3.png"
Content-Type: image/png

�PNG


IHDR����4�PLTE�ɦ!!!�e<"""���r=-�Y<����cB   �����`@��^?����G2�ȥ�R8u>-�K4�aA�[=�D0����Z<�\=�W;�Ƥ�S9�P6�N6����ma�ġ��������Ÿ_>���UF<�Y<��������U:����ͭޏh纥�y@.|B/���ի��I3�~V�jA��ϻ�������Ѵ�m[����oG�L5Ɵ����쩅.,

Answer 1

使用

var formData = $(this).serializeArray();

或

var formData = $(".form").serializeArray();

或

var formData = $(".form").serialize();

这样您的代码将如下所示：

$(".form").submit(function(){
  var formData = $(this).serializeArray();
  console.log(formData);

  $.ajax({
    url: '<?=Yii::$app->homeUrl?>courier/upload-document',
    type: 'POST',
    data: formData,
    async: false,
    processData: false,
    // beforeSend: function(){
    // },
    success: function(data){
      console.log(data);
    }
  });
  return false;
});

接下来在您的 PHP 代码中尝试检查这些东西是否像您一样工作。

$user_id = $_POST['user_id'];
$docs = $_FILES['image_url'];
print_r($_POST);
exit;

更新：

serialize() 方法不发送文件。如果您需要使用 serialize() 上传文件，您可以获取 base64 值并将其作为字符串发送。甚至不能识别 formData() API 的旧浏览器也支持 serialize() 方法。这是这种方法的唯一优点。

如果您想使用 formData() API 来上传文件，那么您可以参考这个 guide。

Answer 2

将 processData 设置为 false 可以防止 jQuery 自动将数据转换为查询字符串。
必须将 contentType 设置为 false，否则 jQuery 会设置错误。

如何从 javascript FormData 访问 PHP 中提交的 ajax 数据

How to access the ajax submitted data in PHP from javascript FormData

javascript

php

multipartform-data