web-dev-qa-db-fra.com

'append' appelé sur un objet qui n'implémente pas l'interface FormData

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

TypeError: 'append' appelé sur un objet qui n'implémente pas l'interface FormData.

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

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

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>
javascriptjqueryajax
70
user3682546

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: Booléen

Par défaut, les données transmises à l'option data en tant qu'objet (techniquement, autre chose qu'une chaîne) seront traitées et transformées en une chaîne de requête, correspondant au 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.

147
Patrick Evans

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

processData: false,
contentType: false,
29
Sahriar rahman supto

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

enctype: 'multipart/form-data'
2
Krupal Patel

Ajouter:

processData: false,
contentType: false,

va certainement aider avec le fichier, un côté à cela est que si vous faites une sorte d'erreurs de passage ou des messages de succès à la page, vous voudrez utiliser json pour vous rendre la vie plus facile.

exemple:

dataTyte: 'json',

cela vous aidera à analyser vos réponses. Sans cela, il y aura une erreur.

0
modnarrandom