Получить все элементы из HTML5 FormData Object - HTML5

Question

Я работаю с объектом HTML5 FormData, и я не могу понять, как найти, какие данные он хранит. Мне нужно получить доступ к нему для целей отладки.

https://developer.mozilla.org/en-US/docs/Web/API/FormData1

Есть такие функции, как

FormData::get([name]); 

, но я не знаю названия. Было бы неплохо иметь что-то вроде следующего:

FormData::dumpData(); 

Что такое хороший способ, чтобы просмотреть все данные в FormData объекта?

Update

Вот пример объекта FormData:

Answer 1

Все функции для FormData не доступны во всех браузерах по умолчанию. Однако вы можете включить их в некоторых. Оформить документы для browser compatibility.

В Chrome вы сможете включить полный доступ к этим функциям, включив Включить функцию экспериментальной веб-платформы под разделом флажков браузера. Перейдите в chrome://flags/ в браузере, чтобы найти этот параметр.

После того как вы включите эту функцию и перезагружается, вы должны быть в состоянии выполнить следующие действия, чтобы просмотреть все ваши FormData, данные:

var formData = new FormData(this); 
var formKeys = formData.keys(); 
var formEntries = formData.entries(); 

do { 
    console.log(formEntries.next().value); 
} while (!formKeys.next().done) 

Конечно, есть, вероятно, более эффективные способы перебора этой структуры данных , хотя это, безусловно, один из способов динамически просматривать все пары K/V в вашем объекте FormData.

Answer 2

Я не понимаю, как вы не можете знать ключи своего FormData объекта.

В случае new FormData(HTMLFormElement) имя каждого поля ввода будет использоваться в качестве имени ключа.

В других случаях вы устанавливаете его, чтобы сохранить его, если вам нужно.

var form = document.forms.namedItem("fileinfo"); 
 
form.addEventListener('submit', function(ev) { 
 
    ev.preventDefault(); 
 
    var oOutput = document.querySelector("div"), 
 
    oData = new FormData(form); 
 
    var file = oData.get('yourFile') 
 
    oOutput.innerHTML = file.name + ' ' + file.size + ' bytes'; 
 
}, false);

<form enctype="multipart/form-data" method="post" name="fileinfo"> 
 
    <label>Your email address:</label> 
 
    <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" size="32" maxlength="64" /> 
 
    <br /> 
 
    <label>File to stash:</label> 
 
    <input type="file" name="yourFile" required /> 
 
    <input type="submit" value="Stash the file!" /> 
 
</form> 
 
<div></div>

Согласно the specs, только входные метки с атрибутом name представляются на сервер, так что если это name атрибут отсутствует, вы не найдете его в FormData либо.