Ho provato console.loge ripetutamente usando for in.

Qui è il riferimento MDN su FormData.

Entrambi i tentativi sono in questo violino .

var fd = new FormData(),
    key;

// poulate with dummy data
fd.append("key1", "alskdjflasj");
fd.append("key2", "alskdjflasj");

// does not do anything useful
console.log(fd);

// does not do anything useful   
for(key in fd) {
    console.log(key);
}

Come posso controllare i dati del modulo per vedere quali chiavi sono state impostate.

Metodo aggiornato:

A partire da marzo 2016, le versioni recenti di Chrome e Firefox ora supportano l'utilizzo FormData.entries()per ispezionare FormData. Fonte .

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

Grazie a Ghost Echo e rloth per segnalato!

Vecchia risposta:

Dopo aver visto questi articoli di Mozilla , sembra che non ci sia modo di estrarre dati da un oggetto FormData. Puoi usarli solo per creare FormData da inviare tramite una richiesta AJAX.

Ho anche trovato questa domanda che afferma la stessa cosa: FormData.append ("chiave", "valore") non funziona .

Un modo per aggirare questo sarebbe costruire un dizionario normale e poi convertirlo in FormData:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

Se desideri eseguire il debug di un semplice oggetto FormData, puoi anche inviarlo per esaminarlo nella console delle richieste di rete:

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

Risposta breve

console.log(...fd)

Risposta più lunga

Se desideri ispezionare l'aspetto del corpo non elaborato, puoi utilizzare il costruttore Response (parte dell'API di recupero)

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

new Response(fd).text().then(console.log)

Alcuni di desiderio suggeriscono la registrazione ogni voce di voci, ma la console.logpuò anche prendere più argomenti
console.log(foo, bar)
Per prendere qualsiasi numero di argomenti è possibile utilizzare il applymetodo e chiamarlo come tale: console.log.apply(console, array).
Ma esiste un nuovo modo ES6 per applicare argomenti con l' operatore spread e l'iteratore
console.log(...array) .

Sapendo questo, e il fatto che FormData e entrambi gli array abbiano un Symbol.iteratormetodo nel suo prototipo, potresti semplicemente farlo senza dover passare su di esso, o chiamare .entries()per avere il controllo dell'iteratore

var fd = new FormData

fd.append("key1", "value1")
fd.append("key2", "value2")

console.log(...fd)

Io uso il formData.entries()metodo Non sono sicuro di tutto il supporto del browser, ma funziona bene su Firefox.

Tratto da https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

// Create a test FormData object
var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

// Display the key/value pairs
for (var pair of formData.entries())
{
 console.log(pair[0]+ ', '+ pair[1]); 
}

C'è anche formData.get()e formData.getAll()con un supporto browser più ampio, ma portano solo i valori e non la chiave. Vedi il link per maggiori informazioni.

In alcuni casi, l'uso di:

for(var pair of formData.entries(){... 

è impossibile.

Ho usato questo codice in sostituzione:

var outputLog = {}, iterator = myFormData.entries(), end = false;
while(end == false) {
   var item = iterator.next();
   if(item.value!=undefined) {
       outputLog[item.value[0]] = item.value[1];
   } else if(item.done==true) {
       end = true;
   }
    }
console.log(outputLog);

Non è un codice molto intelligente, ma funziona ...

Spero sia di aiuto.

Quando lavoro su Angular 5+ (con TypeScript 2.4.2), ho provato come segue e funziona tranne un errore di controllo statico ma for(var pair of formData.entries())non funziona.

formData.forEach((value,key) => {
      console.log(key+" "+value)
});

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

formData.forEach((value,key) => {
  console.log(key+" "+value)
});

Controlla su Stackblitz

Metodo semplice

Ho usato questo codice in 8 angolare

var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

 formData.forEach((value,key) => {
    console.log(key+value)
     });

Soluzioni ES6 +:

Per vedere la struttura dei dati del modulo:

console.log([...formData])

Per vedere ogni coppia chiave-valore:

for (let [key, value] of formData.entries()) {
  console.log(key, ':', value);
}

Ecco una funzione per registrare le voci di un oggetto FormData sulla console come oggetto.

export const logFormData = (formData) => {
    const entries = formData.entries();
    const result = {};
    let next;
    let pair;
    while ((next = entries.next()) && next.done === false) {
        pair = next.value;
        result[pair[0]] = pair[1];
    }
    console.log(result);
};

Documento MDN attivo .entries()

Documento MDN su .next()e.done

  function abc(){ 
    var form = $('#form_name')[0]; 
        var formData = new FormData(form);
        for (var [key, value] of formData.entries()) { 
            console.log(key, value);
        }
        $.ajax({
            type: "POST",
            url: " ",
            data:  formData,
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function() {

            },
            success: function(data) {


            },

       });
}

Devi capire che FormData::entries()restituisce un'istanza di Iterator.

Prendi questo modulo di esempio:

<form name="test" id="form-id">
    <label for="name">Name</label>
    <input name="name" id="name" type="text">
    <label for="pass">Password</label>
    <input name="pass" id="pass" type="text">
</form>

e questo loop JS:

<script>
    var it = new FormData( document.getElementById('form-id') ).entries();
    var current = {};
    while ( ! current.done ) {
        current = it.next();
        console.info( current )
    }
</script>

In Angular 7 ho ottenuto voci sulla console usando la riga di codice sottostante.

formData.forEach(entries => console.log(entries));

Già risposto ma se si desidera recuperare i valori in modo semplice da un modulo inviato, è possibile utilizzare l'operatore di diffusione combinato con la creazione di una nuova mappa iterabile per ottenere una bella struttura.

new Map([...new FormData(form)])

in typeScriptof angular 6, questo codice funziona per me.

var formData = new FormData();
formData.append('name', 'value1');
formData.append('name', 'value2');
console.log(formData.get('name')); // this is return first element value.

o per tutti i valori:

console.log(formData.getAll('name')); // return all values

Prova questa funzione:

function formDataToObject(formData) {
  return Array.from(formData.entries()).reduce((old, pair) => ({
    ...old,
    [pair[0]]: pair[1],
  }), {});
}

L' MDN suggerisce il seguente modulo:

let formData = new FormData();
formData.append('name', 'Alex Johnson')
for(let keyValuePair of formData.entries()){
    console.log(keyValuePair); //has form ['name','Alex Johnson']
}

In alternativa

for (let [key, value] of formData.entries()) {
 console.log(key, ':', value);
}

Prendi in considerazione l'aggiunta di ES + Polyfill , nel caso in cui il browser o l'ambiente non supportino le ultime API JavaScript e FormData.

Spero che aiuti.