Puoi dirmi cosa c'è di sbagliato in questo:

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

Il mio output è simile a questo, non riesco a trovare la mia coppia "chiave" - ​​"valore"

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] }

Non riesco a capire! Ieri ha funzionato così bene, e oggi la mia testa si è schiantata sulla tastiera così tante volte! Firefox, Chrome, entrambi uguali: /

Novità in Chrome 50+ e Firefox 39+ (risp. 44+):

• formdata.entries()(combinare con Array.from()per il debug)
• formdata.get(key)
• e altri metodi molto utili

Risposta originale:

Quello che di solito faccio per "eseguire il debug" di un FormDataoggetto, è semplicemente inviarlo (ovunque!) E controllare i log del browser (ad es. La scheda Rete di Chrome devtools).

Non hai bisogno dello stesso framework Ajax. Non hai bisogno di dettagli. Basta inviarlo:

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

Facile.

Dici che non funziona. Cosa ti aspetti che accada?

Non c'è modo di estrarre i dati da un FormDataoggetto; è inteso solo per te per inviare dati insieme a un XMLHttpRequestoggetto (per il sendmetodo).

Aggiorna quasi cinque anni dopo: in alcuni browser più recenti, questo non è più vero e ora puoi vedere i dati forniti FormDataoltre a riempirli. Vedi la risposta accettata per maggiori informazioni.

Potresti aver avuto lo stesso problema che stavo avendo inizialmente. Stavo cercando di utilizzare FormData per acquisire tutti i miei file di input per caricare un'immagine, ma allo stesso tempo volevo aggiungere un ID di sessione alle informazioni passate al server. Per tutto questo tempo, ho pensato aggiungendo le informazioni, saresti stato in grado di vederle nel server accedendo all'oggetto. Mi sbagliavo. Quando aggiungi a FormData, il modo per controllare le informazioni aggiunte sul server è tramite una semplice $_POST['*your appended data*']query. così:

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

poi su php:

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

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

Se sei in Chrome puoi controllare i dati del post

Ecco come controllare i dati del post

1. Vai alla scheda Rete
2. Cerca il collegamento a cui stai inviando i dati del post
3. Cliccaci sopra
4. Nelle intestazioni, puoi controllare Richiedi payload per controllare i dati del post

puoi vedere che devi usare console.log(formData.getAll('your key')); guarda il https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll

i dati del modulo non vengono visualizzati nella console del browser web

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

prova in questo modo verrà mostrato

Nel mio caso sul browser Edge:

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

dammi lo stesso errore

Quindi non sto usando FormDatae costruisco solo manualmente un oggetto

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]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

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

React Version

Assicurati di avere un'intestazione con '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
    });
  }

Visualizza

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