'Append' appelle un objet qui ne met pas en œuvre l'interface FormData

J'essaie de télécharger l'image avec jquery et ajax. Mais une chose étrange s'est produite ici. Dans la console Enregistrez son affichage

TypeError: 'append' a appelé un objet qui ne met pas en forme l'interface FormData.

S'il vous plaît, dites-moi ce que j'ai fait mal ici?

JS script

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

Mon balisage 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>

Pour utiliser formdata avec jquery, vous devez définir les options correctes

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

Référence .ajax

ProcessData (par défaut: true)

Type: Boolean

Par défaut, les données transmises à l'option de données en tant qu'objet (techniquement, autre chose qu'une chaîne) seront traitées et transformées en une chaîne de requête, en fonction du type de contenu par défaut "application / x-www-form-urlencoded" . Si vous souhaitez envoyer un DOMDocument ou d'autres données non traitées, définissez cette option sur false.

Ajoutez ces deux paramètres dans votre AJAX pour résoudre votre problème:

 processData: false, contentType: false,

Vous devez définir ce paramètre dans l'appel ajax:

 enctype: 'multipart/form-data'