'append' called on an object that does not implement interface FormData

Question

I\'m Trying to upload image on with jquery and ajax. But weird thing happened here. In console Log its showing

TypeError: \'append\' called on an obj

Answer 1

Add these two parameters in your AJAX to solve your problem:

processData: false,
contentType: false,

Answer 2

Adding:

processData: false,
contentType: false,

will definitely help with the file, an aside to that is if you are doing any sort of passing errors or success messages back to the page, you will want to use json to make your life easier.

example:

dataType: 'json',

this will help with parsing your responses. Without it, it will throw an error.

Answer 3

Just edit your line:

var postData = new FormData(this);

to:

var postData = new FormData($(this));

Answer 4

You have to set this parameter in the ajax call:

enctype: 'multipart/form-data'

Answer 5

in order to use formdata with jquery you have to set the correct options

$.ajax({
    url : "/function/pro_pic_upload.php",
    type: "POST",
    data : postData,
    processData: false,
    contentType: false,
    success:function(data, textStatus, jqXHR){
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
        //if fails     
    }
});

.ajax reference

processData (default: true)

Type: Boolean

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.