Я спробував console.logі переглядати його за допомогою for in.

Ось це посилання MDN на FormData.

Обидві спроби є у цій скрипці .

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

Як я можу перевірити дані форми, щоб побачити, які ключі були встановлені.

Оновлений метод:

Станом на березень 2016 року останні версії Chrome і Firefox тепер підтримують FormData.entries()для перевірки FormData. Джерело .

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

Дякуємо Ghost Echo та rloth за те, що вони це вказали !

Стара відповідь:

Переглянувши ці статті Mozilla , схоже, немає можливості отримати дані з об’єкта FormData. Ви можете використовувати їх лише для створення FormData для надсилання через запит AJAX.

Я також щойно знайшов це питання, в якому йдеться про те саме: FormData.append ("ключ", "значення") не працює .

Одним із способів цього було б скласти звичайний словник, а потім перетворити його у 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]);
}

Якщо ви хочете налагоджувати звичайний об’єкт FormData, ви також можете надіслати його, щоб перевірити його на консолі мережевого запиту:

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

Коротка відповідь

console.log(...fd)

Більш довга відповідь

Якщо ви хочете перевірити, як виглядатиме необроблене тіло, тоді ви можете використовувати конструктор Response (частина API отримання)

var fd = new FormData

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

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

Деякі з бажання пропонують увійти кожну запис в запису, але console.logтакож може приймати кілька аргументів ,
console.log(foo, bar)
щоб прийняти будь-яку кількість аргументів , ви можете використовувати applyметод і назвати його як такі: console.log.apply(console, array).
Але є новий ES6 спосіб застосувати аргументи з оператором розширення та ітератором
console.log(...array).

Знаючи це, і той факт, що FormData і обидва масиви має Symbol.iteratorметод у своєму прототипі, ви можете просто зробити це, не маючи на цьому циклу, або закликаючи .entries()отримати перешкоду ітератора

var fd = new FormData

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

console.log(...fd)

Я використовую formData.entries()метод. Я не впевнений у всій підтримці браузера, але він працює чудово на Firefox.

Взято з 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]); 
}

Існує formData.get()і formData.getAll()більш широка підтримка браузера, але вони відображають лише Цінності, а не Ключ. Додаткову інформацію див. За посиланням.

У деяких випадках використання:

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

неможливо.

Я використовував цей код для заміни:

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

Це не дуже розумний код, але він працює ...

Сподіваюся, це допоможе.

Коли я працюю над Angular 5+ (з TypeScript 2.4.2), я спробував наступне, і він працює, окрім статичної помилки перевірки, але також for(var pair of formData.entries())не працює.

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

Перевірте в Stackblitz

Легкий метод

Я використав цей код у кутовій 8

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

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

Рішення ES6 +:

Щоб побачити структуру даних форми:

console.log([...formData])

Щоб побачити кожну пару ключ-значення:

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

Ось функція реєструвати записи об’єкта FormData в консоль як об’єкт.

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

MDN док .entries()

MDN док на .next()та.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) {


            },

       });
}

Ви повинні розуміти, що FormData::entries()повертає екземпляр Iterator.

Візьміть цей приклад:

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

і ця JS-петля:

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

У куті 7 я отримав записи на консолі, використовуючи нижній рядок коду.

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

Вже відповіли, але якщо ви хочете отримати прості способи з поданої форми, ви можете скористатися оператором розповсюдження в поєднанні зі створенням нової карти, ітерабельної, щоб отримати гарну структуру.

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

в typeScriptз angular 6, цей код працює для мене.

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

або для всіх значень:

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

Спробуйте цю функцію:

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

MDN передбачає наступну форму:

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

Як варіант

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

Подумайте про додавання ES + Polyfills , якщо браузер чи середовище не підтримують найновіші API JavaScript і FormData.

Я сподіваюся, що це допомагає.