Ajax form sending null data to php

Question

I am trying to send the form data to PHP with AJAX but when dumping data on PHP page it is returning null values.

Actually, I want a program where I can upload an image than in pop up crop it and then save the cropped image in the database.

My code is given below:

$('#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";
?>

Please let me know what I am missing or doing wrong.

Answer 1

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