当我记录它时，从现有表单创建的FormData似乎是空的[重复]

Answer 1

更新：XHR 规范现在包含更多用于检查 FormData 对象的函数。

FireFox 从 v39.0 开始支持较新的功能，Chrome 预计在 v50 中获得支持。不确定其他浏览器是否如此。

var form = document.querySelector('form');
var formData = new FormData(form);

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

//or

console.log(...formData)

Answer 2

我也面临同样的问题。我无法在控制台上看到。您需要将以下内容添加到ajax请求中，这样数据就会被发送

processData: false, contentType: false 

Answer 3

但是

console.log(formData)

显示

formData

是空的。

“空”是什么意思？当我在 Chrome 中测试它时，它显示

‣ FormData {append: function}

...这就是说它是一个 FormData 对象，这正是我们所期望的。我做了一个小提琴并扩展为代码：

var form = document.querySelector('form'),
    formData = new FormData(form),
    req = new XMLHttpRequest();

req.open("POST", "/echo/html/")
req.send(formData);

...这是我在 Chrome 开发者工具网络面板中看到的：

所以代码按预期工作。

我认为这里的脱节在于您期望 FormData 像普通 JavaScript 对象或数组一样工作，并让您直接查看和操作其内容。不幸的是它不是这样工作的——FormData在其公共API中只有一种方法，那就是

append

。您几乎可以用它做的所有事情就是创建它，向其附加值，然后将其传递给 XMLHttpRequest。

如果您想以可以检查和操作的方式获取表单值，则必须采用老式方式：迭代输入元素并逐一获取每个值，或者使用由其他人编写的函数，例如jQuery 的。这是一个 SO 线程，其中包含一些方法：How can I get form data with JavaScript/jQuery?

Answer 4

根据 MDN 文档中的 FormData

实现

FormData

的对象可以直接在

for...of

结构中使用，而不是

entries(): for (var p of myFormData)

相当于

for (var p of myFormData.entries())

。

迭代

FormData.entries()

对我来说不起作用。

这是我检查

formData

是否为空的方法：

var isFormDataEmpty= true;
for (var p of formData) {
   isFormDataEmpty= false;
   break;
}

迭代

formData

会为您提供上传的文件，您可以使用它来获取文件名、文件类型验证等。