javascript - that - multipart/form-data ajax

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

Question

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

TypeError: ''append'' invoca un objeto 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>

Answer 1

Agregue estos dos parámetros en su AJAX para resolver su problema:

processData: false,
contentType: false,

Answer 2

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

referencia .ajax

processData (predeterminado: verdadero)

Tipo: booleano

Por defecto, los datos pasados ​​a la opción de datos como un objeto (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 predeterminado "application / x-www-form-urlencoded" . Si desea enviar un DOMDocument u otros datos no procesados, establezca esta opción en falso.

Answer 3

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

enctype: ''multipart/form-data''