'append' invoca un object que no implementa la interfaz FormData

Estoy intentando cargar imágenes con jquery y ajax. Pero algo extraño sucedió aquí. En la console, el logging muestra

TypeError: 'append' invoca un object que no implementa la interfaz FormData.

Por favor dime que hice mal aquí?

Script JS

var prosrc=$("#pro_pix img").last().attr("src"); $("#logoform").on('change',function(event){ var postData = new FormData(this); $("#pro_pix img").last().hide(); $("#pro_pix img").first().show(); event.preventDefault(); $.ajax( { url : "/function/pro_pic_upload.php", type: "POST", data : postData, 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 } }); }); 

Mi marcado de HTML

  <div class="row"> <!-- left column --> <div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12"> <div class="text-center"> <img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar"> <img src="<?php echo $rowuser['profile_logo']; ?>" class="avatar img-circle img-thumbnail" alt="avatar"> <h6>Upload a different photo...</h6> <form role="form" id="logoform" enctype="multipart/form-data"> <input id="logo" name="logo" type="file" class="text-center center-block well well-sm"> </form> </div> </div> 

Para usar formdata con jquery, debes establecer las opciones correctas

 $.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 } }); 

reference .ajax

processData (pnetworkingeterminado: verdadero)

Tipo: boolean

Por defecto, los datos pasados ​​a la opción de datos como un object (técnicamente, cualquier cosa que no sea una cadena) serán procesados ​​y transformados en una cadena de consulta, que se ajusta al tipo de contenido pnetworkingeterminado "application / x-www-form-urlencoded" . Si desea enviar un DOMDocument u otros datos no procesados, establezca esta opción en falso.

Agregue estos dos parameters en su AJAX para resolver su problema:

 processData: false, contentType: false, 

Tienes que establecer este parámetro en la llamada ajax:

 enctype: 'multipart/form-data'