从HTML5 FormData对象获取所有项目 - HTML5

Question

我一直在使用HTML5 FormData对象，我似乎无法弄清楚如何找到它所拥有的数据。我需要访问它以进行调试。

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

有像

这样的功能

FormData::get([name]);

但我不知道这些名字。如下所示：

FormData::dumpData();

查看FormData对象中的所有数据有什么好方法？

更新

以下是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)

当然，可能有更好的方法来迭代这个数据结构，尽管它肯定是一种动态查看FormData对象中所有K / V对的方法。

Answer 2

我不知道您如何知道FormData对象的密钥。

在new FormData(HTMLFormElement)的情况下，每个输入字段的名称将用作键名。

在其他情况下，您可以设置它，以便在需要时存储它。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

根据the specs，只有具有name属性的输入标记才会提交给服务器，因此如果缺少此name属性，您将无法在FormData要么。