0

I am trying to send both an image file and a array via my AJAX request to my PHP script, but either the array or the image file dosen't show up. I have located the problem being the lines, that you have to add to your AJAX when you are dealing with files.

contentType: false, processData: false,

If these two lines are added the array arrives at PHP script empty. What can I do differently? :)

My AJAX:

$('#createMember').on('submit', function(event){
    event.preventDefault();
    $("#LoadingIcon").show();

    var form_data = $(this).serialize();

    $.ajax({
        url:"scripts/createMember.php",
        method:"POST",
        data:form_data,
        cache: false,
        contentType: false,
        processData: false,
        success:function(data)
        {
          $.notify({
            title: '<strong>Created!</strong><br>',
            message: 'Member is now created!'
          });
          $("#LoadingIcon").fadeOut(200);
        });
      });

My HTML

<form method="post" id="opretMedlem" enctype="multipart/form-data">
    <input type="text" name="info[name]" class="form-control1 info" />
    <input type="text" name="info[age]" class="form-control1 info" />
    <input type="file" name="info[image]" class="form-control1 info" />
    <input type="submit" name="submit" class="btn btn-info" value="Create member" />
</form>
Anders
  • 105
  • 1
  • 9
  • Possible duplicate of [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) – Sean Jan 02 '19 at 02:21
  • 2
    Possible duplicate of [Uploading both data and files in one form using Ajax?](https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax) – M. Eriksson Jan 02 '19 at 02:21
  • 1
    `var form_data = $(this).serialize();` is not actually [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData). – M. Eriksson Jan 02 '19 at 02:23
  • I see! I have changed it to var `form_data = new FormData(this);` but the problem still exists. If I add the `contentType: false` and the `processData: false` the array turns up emtpy in the PHP script. – Anders Jan 02 '19 at 02:28
  • Please improve the language of your question since it's hard to understand. – Edgar Quintero Jan 02 '19 at 02:31
  • 2
    You're also using the wrong ID for the form. You're jQuery is `$('#createMember')` while the form has `id="opretMedlem"`. – M. Eriksson Jan 02 '19 at 02:34

1 Answers1

0

You have forgot to use enctype in ajax request. Also try to use FormData() constructor instead of serializing the data.

$('#opretMedlem').on('submit', function(event){
    event.preventDefault();

    var form_data = $(this).serialize();

    var form = $(this)[0];
    var data = new FormData(form);

    $.ajax({
        url:"scripts/createMember.php",
        enctype: 'multipart/form-data',
        method:"POST",
        data:data,
        cache: false,
        contentType: false,
        processData: false,
        success:function(data) {
          alert('done');
        }
   });
});

Look at the fiddle: https://jsfiddle.net/up8zavtb/

Harsh Mathur
  • 39
  • 7