Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 822
Pankaj Bhambhani Avatar asked Dec 04 '13 12:12

Pankaj Bhambhani


3 Answers

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.

like image 106
Lawrence Gandhar Avatar answered Oct 27 '22 01:10

Lawrence Gandhar


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'];
like image 39
Jonathan Lonowski Avatar answered Oct 27 '22 00:10

Jonathan Lonowski


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.

like image 28
user3460576 Avatar answered Oct 27 '22 00:10

user3460576