web-dev-qa-db-fra.com

FormData.append ("clé", "valeur") ne fonctionne pas

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

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

Ma sortie 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 ne peux pas comprendre! Hier, cela a si bien fonctionné et aujourd'hui, ma tête s'est écrasée si souvent au clavier! Firefox, Chrome, les deux identiques: /

javascripthtml5form-data
90
netzaffin

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

  • formdata.entries() (à combiner avec Array.from() pour le débogage)
  • formdata.get(key)
  • et plus de méthodes très utiles

Réponse originale:

Ce que je fais habituellement pour 'déboguer' un objet FormData, c'est juste l'envoyer (n'importe où!) Et consulter les journaux du navigateur (par exemple, onglet Réseau Chrome devtools ').

Vous n'avez pas besoin d'un/du même framework Ajax. Vous n'avez besoin d'aucun détail. Envoyez-le simplement:

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

Facile.

114
Rudie

Vous dites que ça ne marche pas. Qu'attendez-vous que cela se produise?

Il est impossible d'extraire les données d'un objet FormData; il vous est simplement destiné à envoyer des données avec un objet XMLHttpRequest (pour la méthode send).

Mise à jour presque cinq ans plus tard: dans certains navigateurs plus récents, ce n'est plus le cas et vous pouvez maintenant voir les données fournies à FormData en plus d'y insérer simplement des données. Voir la réponse acceptée pour plus d'informations.

51
Jesper

Vous avez peut-être eu le même problème que j'avais initialement. J'essayais d'utiliser FormData pour récupérer tous mes fichiers d'entrée afin de télécharger une image, mais je souhaitais en même temps ajouter un ID de session aux informations transmises au serveur. Pendant tout ce temps, j'ai pensé qu'en ajoutant les informations, vous pourriez les voir sur le serveur en accédant à l'objet. J'avais tort. Lorsque vous ajoutez à FormData, le moyen de vérifier les informations ajoutées sur le serveur consiste en une simple requête $_POST['*your appended data*']. ainsi:

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){
    //...
}
16
CodeGodie

Si vous êtes dans Chrome, vous pouvez vérifier les données de publication

Voici comment vérifier les données de publication

  1. Aller à l'onglet Réseau
  2. Recherchez le lien auquel vous envoyez des données de post
  3. Clique dessus
  4. Dans les en-têtes, vous pouvez cocher Request Payload pour vérifier les données de publication.

Chrome's DevTools

15
madhu131313

vous pouvez le voir vous devez utiliser console.log(formData.getAll('your key')); regardez le https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

8
yehonatan yehezkel

Dans mon cas sur le navigateur Edge: 

  const formData = new FormData(this.form);
  for (const [key, value] of formData.entries()) {
      formObject[key] = value;
  }

donne moi la même erreur

Donc, je n'utilise pas FormData et je viens de construire manuellement un objet

import React from 'react';    
import formDataToObject from 'form-data-to-object';

  ...

let formObject = {};

// Edge compatibility -  replace FormData by
for (let i = 0; i < this.form.length; i++) {
  if (this.form[i].name) {
    formObject[this.form[i].name] = this.form[i].value;
  }
}

const data = formDataToObject.toObj(formObject): // convert "user[email]":"[email protected]" => "user":{"email":"[email protected]"}

const orderRes = await fetch(`/api/orders`, {
        method: 'POST',
        credentials: 'same-Origin',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      });

const order = await orderRes.json();
1
Ramadanoski Julie

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

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

essayez de cette façon ça va montrer 

0
Dulanga Heshan

Réagir à la version

Assurez-vous d'avoir un en-tête avec 'content-type': 'multipart/form-data'

_handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData();
          formData.append('file', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }

     axios.post("/upload", formData, config)
         .then((resp) => {
             console.log(resp)
         }).catch((error) => {
    })
  }

  _handleImageChange(e) {
    e.preventDefault();
    let file = e.target.files[0];
    this.setState({
      file: file
    });
  }

Vue

  #html
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />
0
7urkm3n