Ajax POST request via jQuery and FormData - $_POST empty on PHP

Question

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

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

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

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

Any suggestions would be appreciated.

EDIT : Here is the form in 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

The FormData() constructor isn't a selector engine and it doesn't represent an Array-like collection, so var formData is likely equal to undefined.

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

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

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

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

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

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

Answer 2

I know this is an old post, but I came across it when trying to solve an analogous problem for myself, and none of the replies pointed this issue out, so I am posting a reply in case someone else finds him/herself in the same situation.

It turns out that, as documented in another StackOverflow post:

Does form data still transfer if the input tag has no name?

if you do not have a non-empty name attribute for your file input element, no data from that element will be sent in a request.

So your input element:

<input type="file" id="InputLogo" accept="image/*">

Should be:

<input type="file" id="InputLogo" accept="image/*" name="yourfieldnamehere">

or the file will not be sent with the form data.

Answer 3

I too tried a lot with the following ways:

var formData = new FormData("form")[0];
var formData = new FormData("form");
var formData = new FormData($('form-id'));
var formData = new FormData(this);

None of them worked for me. But at last, I used a javascript way of getting elementById, and it worked perfectly.

formdata = new FormData(document.getElementById('form_id'))

Usually in request headers you will find an encrypted text like the one given below: multipart/form-data; boundary=----WebKitFormBoundaryUuVvGDydAdTf3Bmp

And when you try to alert the form data it will show [object formdata]. This means that the formdata function is working fine.

When you return the values of $_POST, $_REQUEST or $_FILES, and if it is blank, it would mean that formdata is not able to access the form element provided. So first you have to confirm that formdata is able to access the form element or not, and then try other possibilities.

Answer 4

well there are few thigns you need to consider while using formData with ajax..and you can append data to FormData using append() method of FormData.

try this..

 var formData = new FormData("form")[0];
 formData.append("fileName",$("#InputLogo")[0].files[0].name);

 $.ajax ( {
   url : 'upload.php',
   type : 'POST',
   data : formData,
   processData: false,  // tell jQuery not to process the data
   contentType: false,   // tell jQuery not to set contentType
   success : function(data) {
      console.log(data);
      alert(data);
   }
});

reference

Answer 5

One problem is that fileuploads via Ajax don't work unless you use some HTML5 advantages.

Here is a goo post describing it: How can I upload files asynchronously?