FormData.append("key", "value") ne fonctionne pas

Question

Pouvez-vous me dire ce qui ne va pas avec ça :

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

Mon résultat ressemble à ceci, je ne trouve pas ma paire "clé" - "valeur".

FormData
*__proto__: FormData
**append: function append() { [native code] }
***arguments: null
***caller: null
***length: 0
***name: "append"
***prototype: append
***__proto__: function Empty() {}
*constructor: function FormData() { [native code] }
**arguments: null
**caller: null
**length: 0
**name: "FormData"
**prototype: FormData
**toString: function toString() { [native code] }
*__proto__: Object
**__proto__: Object
**__defineGetter__: function __defineGetter__() { [native code] }
**__defineSetter__: function __defineSetter__() { [native code] }
**__lookupGetter__: function __lookupGetter__() { [native code] }
**__lookupSetter__: function __lookupSetter__() { [native code] }
**constructor: function Object() { [native code] }
**hasOwnProperty: function hasOwnProperty() { [native code] }
**isPrototypeOf: function isPrototypeOf() { [native code] }
**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
**toLocaleString: function toLocaleString() { [native code] }
**toString: function toString() { [native code] }
**valueOf: function valueOf() { [native code] }

Je n'arrive pas à comprendre ! Hier ça marchait si bien, et aujourd'hui ma tête a écrasé le clavier tellement de fois ! Firefox, Chrome, les deux sont identiques :/

Answer 1

Nouveau dans Chrome 50+ et Firefox 39+ (resp. 44+) :

• formdata.entries() (combinez avec Array.from() pour faciliter le débogage)
• formdata.get(key)
• et d'autres méthodes très utiles

Réponse originale :

Ce que je fais habituellement pour "déboguer" une FormData il suffit de l'envoyer (n'importe où !) et de vérifier les journaux du navigateur (par exemple, l'onglet Réseau de Chrome devtools).

Vous n'avez pas besoin d'un/du même framework Ajax. Vous n'avez pas besoin de détails. Il suffit de l'envoyer :

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

Facile.

Answer 2

Vous dites que ça ne marche pas. Qu'attendez-vous à ce qu'il se passe ?

Il n'y a aucun moyen de récupérer les données d'une FormData il est juste destiné à être utilisé pour envoyer des données avec un objet XMLHttpRequest (pour le send méthode).

Mise à jour presque cinq ans plus tard : Dans certains navigateurs plus récents, cela n'est plus vrai et vous pouvez désormais voir les données fournies à FormData en plus de simplement y mettre des données. Voir la réponse acceptée pour plus d'informations.

Answer 3

Vous avez peut-être eu le même problème que moi au départ. J'essayais d'utiliser FormData pour récupérer tous mes fichiers d'entrée pour télécharger une image, mais en même temps je voulais ajouter un ID de session aux informations transmises au serveur. Pendant tout ce temps, je pensais qu'en ajoutant l'information, vous seriez capable de la voir dans le serveur en accédant à l'objet. J'avais tort. Quand vous ajoutez des données au formulaire, la façon de vérifier l'information ajoutée sur le serveur est par un simple $_POST['*your appended data*'] Requête. Comme ça :

js :

$('form').submit(function(){
    var sessionID = 8;
    var formData = new FormData(this);
    formData.append('id', sessionID);

    $.ajax({
        url: "yoururl.php",
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });
});

puis sur php :

$sessionID = $_POST['id'];
$files = $_FILES['image'];

$foreach ($files as $key=>val){
    //...
}

Answer 4

Si vous êtes dans Chrome, vous pouvez vérifier les données postales.

Voici comment vérifier les données du poste

1. Allez dans l'onglet Réseau
2. Recherchez le lien vers lequel vous envoyez les données postales.
3. Cliquez dessus
4. Dans les en-têtes, vous pouvez cocher la case Request Payload pour vérifier les données du message.

Answer 5

les données du formulaire n'apparaissent pas dans la console du navigateur web

for (var data of formData) {
  console.log(data);
}

essayez de cette façon, il montrera