Saya sudah mencoba console.logdan mengulanginya for in.

Ini dia Referensi MDN pada FormData.

Kedua upaya ada di biola ini .

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

Bagaimana saya bisa memeriksa data formulir untuk melihat kunci apa yang telah ditetapkan.

Metode yang Diperbarui:

Pada Maret 2016, versi terbaru dari Chrome dan Firefox sekarang mendukung penggunaan FormData.entries()untuk memeriksa FormData. Sumber .

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

Terima kasih kepada Ghost Echo dan bajingan karena menunjukkan ini!

Jawaban lama:

Setelah melihat artikel Mozilla ini , sepertinya tidak ada cara untuk mendapatkan data dari objek FormData. Anda hanya dapat menggunakannya untuk membangun FormData untuk dikirim melalui permintaan AJAX.

Saya juga baru saja menemukan pertanyaan ini yang menyatakan hal yang sama: FormData.append ("key", "value") tidak berfungsi .

Salah satu caranya adalah dengan membangun kamus reguler dan kemudian mengonversinya ke 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]);
}

Jika Anda ingin men-debug objek FormData biasa, Anda juga bisa mengirimnya untuk memeriksanya di konsol permintaan jaringan:

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

Jawaban singkat

console.log(...fd)

Jawaban yang lebih panjang

Jika Anda ingin memeriksa seperti apa bahan bakunya maka Anda dapat menggunakan konstruktor Respons (bagian dari mengambil API)

var fd = new FormData

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

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

Beberapa keinginan menyarankan penebangan setiap entri entri, tetapi console.logjuga dapat mengambil beberapa argumen
console.log(foo, bar)
Untuk mengambil sejumlah argumen Anda bisa menggunakan applymetode dan menyebutnya seperti: console.log.apply(console, array).
Tetapi ada cara ES6 baru untuk menerapkan argumen dengan operator penyebaran dan iterator
console.log(...array) .

Mengetahui hal ini, dan fakta bahwa FormData dan kedua array memiliki Symbol.iteratormetode dalam prototipe Anda hanya bisa melakukan ini tanpa harus mengulanginya, atau menelepon .entries()untuk mendapatkan pegangan iterator

var fd = new FormData

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

console.log(...fd)

Saya menggunakan formData.entries()metode ini. Saya tidak yakin tentang semua dukungan browser, tetapi berfungsi baik di Firefox.

Diambil dari 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]); 
}

Ada juga formData.get()dan formData.getAll()dengan dukungan browser yang lebih luas, tetapi mereka hanya memunculkan Nilai dan bukan Kunci. Lihat tautan untuk info lebih lanjut.

Dalam kasus tertentu, penggunaan:

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

tidak mungkin.

Saya telah menggunakan kode ini sebagai pengganti:

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

Ini bukan kode yang sangat pintar, tetapi berfungsi ...

Semoga ini bisa membantu.

Ketika saya mengerjakan Angular 5+ (dengan TypeScript 2.4.2), saya mencoba sebagai berikut dan berfungsi kecuali kesalahan pengecekan statis tetapi juga for(var pair of formData.entries())tidak berfungsi.

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

Periksa di Stackblitz

Metode yang mudah

Saya menggunakan kode ini dalam 8 sudut

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

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

Solusi ES6 +:

Untuk melihat struktur data formulir:

console.log([...formData])

Untuk melihat setiap pasangan nilai kunci:

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

Berikut adalah fungsi untuk mencatat entri objek FormData ke konsol sebagai objek.

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

Dokumentasi MDN aktif .entries()

Dokumentasi MDN .next()dan.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) {


            },

       });
}

Anda harus memahami bahwa FormData::entries()mengembalikan instance dariIterator .

Ambil contoh formulir ini:

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

dan loop-JS ini:

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

Di sudut 7 saya mendapat entri di konsol menggunakan di bawah baris kode.

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

Sudah dijawab tetapi jika Anda ingin mengambil nilai dengan cara yang mudah dari formulir yang dikirimkan, Anda dapat menggunakan operator spread dikombinasikan dengan membuat Peta baru yang dapat diubah untuk mendapatkan struktur yang bagus.

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

di typeScriptdari angular 6, kode ini bekerja untuk saya.

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

atau untuk semua nilai:

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

Coba fungsi ini:

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

The MDN menunjukkan bentuk berikut:

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

kalau tidak

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

Pertimbangkan untuk menambahkan ES + Polyfill , jika browser atau lingkungan tidak mendukung JavaScript dan API FormData terbaru.

Saya harap ini membantu.