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

87

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

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

Veuillez me dire ce que j'ai fait de mal 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>
javascript jquery ajax
la source
Regardez la première question connexe: Comment envoyer des objets FormData avec des requêtes Ajax dans jQuery? .
Felix Kling

Réponses:

184

pour utiliser formdata avec jquery, vous devez définir les bonnes 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     
    }
});

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.

Patrick Evans
la source
J'ai une confusion. Pouvez-vous m'aider s'il-vous-plaît? supposons que je veuille envoyer un fichier et une chaîne avec un tableau. Supposons que dans mon script, je souhaite envoyer le fichier image et une chaîne avec le nom d'utilisateur. comment faire ça? Est-il possible de créer un json ou un xml ou tout autre tableau pour contenir le fichier et la chaîne ensemble? Je suis débutant. c'est peut-être la question idiote. J'ai besoin de votre aide ..
1
il suffit d'appeler la méthode append de l'objet FormData pour ajouter des éléments, c'est-à-dire:postData.append("name",value);
Patrick Evans
Remarque pour les éléments complexes comme les objets, c'est-à-dire {cat:"meow",dog:"bark"}:, vous devez d'abord utiliser JSON.stringify: postData.append("name",JSON.stringify(someObject));et analyser le json côté serveur
Patrick Evans
1
N'oubliez pas: cache: false cela m'a posé des problèmes tout à l'heure. Avec tout cela fixé.
Zri
Merci, je suis bloqué sur cette question depuis une heure!
user752746
34

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

processData: false,
contentType: false,
Sahriar rahman supto
la source
N'oubliez pas: cache: falsecela m'a posé des problèmes tout à l'heure. Avec tout cela fixé.
Zri
@Zri, qu'est-ce que ça veut dire cache: false?
Fatih Mert Doğancan
De la documentation jQuery: cache (par défaut: true, false pour les types de données 'script' et 'jsonp') Type: Boolean Si défini sur false, cela forcera les pages demandées à ne pas être mises en cache par le navigateur. Remarque: la définition du cache sur false ne fonctionnera correctement qu'avec les requêtes HEAD et GET. Cela fonctionne en ajoutant "_ = {horodatage}" aux paramètres GET. Le paramètre n'est pas nécessaire pour les autres types de requêtes, sauf dans IE8 lorsqu'un POST est effectué vers une URL qui a déjà été demandée par un GET.
Zri
1
@Zri Vous utilisez peut-être une GETrequête. Le cache:falsene fonctionnera pas correctement pour la POSTdemande. Comme vous l'avez mentionné dans le commentaire ci-dessus, cela ne fonctionne que pour les demandes HEADet GET. Et FormDataest utilisé pour soumettre des données de formulaire qui devraient être un POSTau lieu de GET. Je vous suggère donc de toujours utiliser POST pour soumettre les données du formulaire.
Lucky
2

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

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

Ajouter:

processData: false,
contentType: false,

va certainement vous aider avec le fichier, en plus, si vous faites des erreurs ou des messages de réussite sur la page, vous voudrez utiliser json pour vous faciliter la vie.

exemple:

dataType: 'json',

cela vous aidera à analyser vos réponses. Sans cela, cela provoquera une erreur.

modnarrandom
la source
0

Modifiez simplement votre ligne: 

var postData = new FormData(this);

à:

var postData = new FormData($(this));
e sadeghi
la source