php doesn't parse data from multipart/form-data form's data sent by ajax

Question

I have this form in html that has both file and other input elements together:

<form action="/imsick/disease/add" id="addDisease" method="post" role="form" data-async="" enctype="multipart/form-data">
<input type="text" id="name" name="name" class="form-control">
<textarea id="description" name="description" class="form-control" rows="10"></textarea>
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="5">
<input type="checkbox" name="category[]" value="6">
<input type="checkbox" name="category[]" value="4">
<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="7">
<input type="checkbox" name="category[]" value="2">
<input type="file" id="approach-file" name="approach">

<input type="checkbox" name="symptom[0][is_patogonomic]">
<input type="text" name="symptom[0][name]" class="form-control typeahead" typeahead-source="http://localhost/imsick/symptom/search">

<input type="checkbox" name="symptom[1][is_patogonomic]">
<input type="text" name="symptom[1][name]" class="form-control typeahead" typeahead-source="http://localhost/imsick/symptom/search">

<input type="text" name="lab_symptom[0][name]" class="form-control typeahead" typeahead-source="http://localhost/imsick/labsymptom/search">
<select name="lab_symptom[0][anomaly_type]" class="form-control">
    <option value="ABOVE">ABOVE</option>
    <option value="UNDER">UNDER</option>
    <option value="POSITIVE">POSITIVE</option>
    <option value="NEGATIVE">NEGATIVE</option>
    <option value="++">++</option>
</select>
<input type="submit" class="btn btn-default center-block">
</form>

and this is my javascript/jquery code for submiting form data by ajax :

$('form[data-async]').on('submit', '', function(event) {
//form data object
event.preventDefault();
var $form = $(this);
var __fd = new FormData($form[0]);
$.ajax({
    type: $form.attr('method'),
    url: $form.attr('action'),
    data: __fd,
    processData: false,
    beforeSend: function(xhr) {
        //not important
    },
    success: function(data, status) {
        data = $.parseJSON(data);
        if (data.success) {
            //not important

        } else {
            //not important
        }
    },
    error: function() {
        //not important
    }
});
return false;
});

after submitting data , executing var_dump($_POST) on the form's target URL , will get me the following :

        array(2) {
      ["_url"]=>
      string(12) "/disease/add"
      ["------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition:_form-data;_name"]=>
      string(1404) ""name"

    asdasdaasdasdasdasda
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="description"

    asdsad
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="category[]"

    5
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="category[]"

    4
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="category[]"

    1
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="category[]"

    7
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="approach"; filename=""
    Content-Type: application/octet-stream


    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="symptom[0][is_patogonomic]"

    on
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="symptom[0][name]"

    asdasd
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="symptom[1][is_patogonomic]"

    on
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="symptom[1][name]"

    asdasd
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="lab_symptom[0][name]"

    asdasdasd
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN
    Content-Disposition: form-data; name="lab_symptom[0][anomaly_type]"

    ABOVE
    ------WebKitFormBoundaryHmT1pwGJDYbVxvrN--
    "
    }

it seems like php doesn't parse this data and $_POST array only has two members. could anyone tell me what am i doing wrong?

thanks

Jithin Lukose · Accepted Answer · 2014-07-19 10:59:47Z

4

Try to add contentType: false

$.ajax({
    type: $form.attr('method'),
    url: $form.attr('action'),
    data: __fd,
    processData: false,
    contentType: false ,  // tell jQuery not to set contentType
    beforeSend: function(xhr) {
   //not important
    },
    success: function(data, status) {
    data = $.parseJSON(data);
    if (data.success) {
        //not important

    } else {
        //not important
    }
},
error: function() {
    //not important
}

});

answered Jul 19, 2014 at 10:59

Jithin Lukose

3444 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mgrenier Over a year ago

can you elaborate on why this fixes the issue?

Jithin Lukose Over a year ago

processData - jQuery convert array data to string. so we cant receive file from server. contentType - set to false because jQuery set content to application/x-www-form-urlencoded. so file dosen't send to server

Collectives™ on Stack Overflow

php doesn't parse data from multipart/form-data form's data sent by ajax

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related