Ajax 表单向 php 发送空数据

Question

我正在尝试使用 AJAX 将表单数据发送到 PHP，但是在 PHP 页面上转储数据时它返回空值。

实际上，我想要一个可以上传图像的程序，而不是弹出式裁剪图像，然后将裁剪后的图像保存在数据库中。

我的代码如下：

$('#fileinput').on('change', function() {
  var formD = new FormData();
  var file = $('#fileinput')[0].files[0];
  // var nfile = file.serializeArray();
  // console.log(file);
  formD.append('file', file);
  formD.append("clientID", 2993);
  console.log(formD);

  $.ajax({
    url: 'croped.php',
    type: 'POST',
    data: {
      'ff': formD
    },
    processData: false,
    contentType: true,
    // dataType: 'json',
    success: function(data) {
      console.log(data);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST" enctype="multipart/form-data">
  <input type="file" name="image" id="fileinput" />
  <input type="submit" name="upld" id="upldbtn" />
</form>

croped.php

<?php
var_dump($_POST);
echo "ll";
?>

请让我知道我遗漏了什么或做错了什么。

Answer 1

试试这个，它对我有用:)

1. 内容类型：假，
2. 数据：formD，

例如

  $.ajax({
    url: "croped.php",
    type: "POST",
    data: formD,
    processData: false,
    contentType: false,
    // dataType: 'json',
    success: function (data) {
      console.log(data);
    },
  });

对于php代码

<?php

echo "<pre>";
print_r($_FILES);

Answer 2

  <form action = "" method = "POST" enctype = "multipart/form-data" 
        id="formdata">
        <input type = "file" name = "image" id="fileinput" />
        <input type = "submit" name="upld" id="upldbtn" />
   </form>

$("#formdata").submit(function(e) {

    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
    url: window.location.pathname,
    type: 'POST',
    data: formData,
    success: function (data) {
        alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
});
});