Sending a form with a jQuery file by ajax

Question

My goal is to create a form to send an image to the server through Ajax via jQuery.

I already asked the question here (Problem sending a form with a jquery file component by ajax), but it's been closed and it still doesn't work. From my question, I changed the sending function like this (according to this post: jQuery AJAX file upload PHP):

$( "#sendProfileImg").on('submit', function(e) {
  e.preventDefault();
  var file_data = $('#profileImgFile').prop('files')[0];   
  var form_data = new FormData();                  
  form_data.append('file', file_data);
  console.log(form_data); 
  $.ajax({
    url: 'uploadImage.php',
    data: form_data,
    type: 'POST',
          dataType: 'text',
          contentType: false,
          cache: false,
          processData:false,
    success: function( data ) {
      console.log(data);
    }
  });
});

But the answer I get from my uploadImage.php file (which consist of just var_dump($_POST);) is the following:

array(0) {
}

Any advice?

Please share the php code. – Nawed Khan Jan 14 '20 at 19:03 — Nawed Khan, Jan 14 '20 at 19:03
what does `console.log(form_data); ` result in? – person13 Jan 14 '20 at 19:14 — person13, Jan 14 '20 at 19:14

score -1 · Answer 1 · answered Jan 14 '20 at 19:14

-1

Since your request only has the file you might want want to use the $_FILES variable instead of $_POST. Uploaded files can only accessed through the $_FILES variable.

answered Jan 14 '20 at 19:14

Fareed Nema

1
1

Emiliano · Answer 2 · 2020-01-23T17:59:08.003

-1

three things

use $_FILES instead $_POST please check this url
check if you have an updated browser(not all browsers are compatible with FormData) check the browser compatibility here

edited Jan 23 '20 at 17:59

answered Jan 14 '20 at 19:15

Emiliano

698
9
30

whoever you are that downvote the question please tell why is that, I know that the question is incomplete but not for that my answer is invalid and deserve a downvote – Emiliano Jan 15 '20 at 00:28
Your answer can be improved to include some explanations instead of just things to do. – Joe W Jan 23 '20 at 16:32
of course, and you will undo the downvote? – Emiliano Jan 23 '20 at 16:35
1

I didn't vote on this question, you shouldn't make assumptions about voting based on a comment which is a reason why people don't comment – Joe W Jan 23 '20 at 16:58
ok ok if you say so – Emiliano Jan 23 '20 at 18:06

score -1 · Answer 3 · answered Jan 14 '20 at 21:30

Thank you very much everbody, the problem is solved.

I discovered 2 issues:

I have to use form_data.append. I didn't know this function and it wasn't on the tutorials I followed. Furthermore, I had to use this funtion for every field of the formular, not just the one with the file
$_POST return no information about the posted files. That's why I didn't get any return about the posted information.

Thanks again everybody

Sending a form with a jQuery file by ajax

3 Answers3