Upload file with ajax and php not sending the file?

Question

it is sending the inputs well, but not the file to php. any ideas why?

$('#submit_c').click(function (e) {
  var form = $('#form32_c');

    // prevent default action
    e.preventDefault();

    // send ajax request
    $.ajax({
      url: '/js-calls/post.php',
      type: 'POST',
      cache: false,
      data: form.serialize(),
      success: function(data){
          $('#back').hide();
      }
    });
});

form:

  <form id="form32_c" method="post"><br><br>

  <div class=titles_c>Title:</div>
  <input type="text" class="form_inputs" name="ftitle" placeholder="name" maxlength="50"><br><br>

   <div class=titles_c>Cover Image:</div>
    <input type="file" name="fileToUpload" class="form_inputs" id="fileToUpload"><br><br>

    <input type="submit" id="submit_c" class="button2" value="CREATE">
    </form>

php:

if (isset($_FILES['fileToUpload']['tmp_name'])) {
...
}
else{
always here.
}

You need to use FormData with dataType set to text, along with other options like Cache.. Cant remember the rest off the top of my head — treyBake, May 14 '18 at 20:36

score 1 · Answer 1 · answered May 14 '18 at 20:25

1

Looks like your form's markup is missing a the "enctype" attribute. See here: https://www.w3schools.com/tags/att_form_enctype.asp

Your form's beginning tag should look like this:

<form id="form32_c" method="post" enctype="multipart/form-data">

answered May 14 '18 at 20:25

Isaac Boakye

71
5

I would avoid recommending w3schools, it preaches some bad practices etc. Mdn is a much better resource :) – treyBake May 14 '18 at 20:36
Thanks for the tip, @ThisGuyHasTwoThumbs. Will bear that in mind next time ;) – Isaac Boakye May 14 '18 at 20:51
1

This won't help. jQuery `serialize()` can't serialize file inputs. – Barmar May 14 '18 at 21:00

Upload file with ajax and php not sending the file?

1 Answers1