当我记录从现有表单创建的 FormData 时，它看起来是空的

我试图从一个 web 表单中获取一组键(输入名称或类似名称)和值(输入值) :

<body>
<form>
<input type="text" name="banana" value="swag">
</form>


<script>
var form = document.querySelector('form');
var formData = new FormData(form);
</script>
</body>

根据 FormData 文档，formData应该包含来自表单的键和值。但是 console.log(formData)显示 formData是空的。

如何使用 FormData 从表单快速获取数据？

JSFiddle

129378 次浏览
小开

But console.log(formData) shows formData is empty.

What do you mean by "empty"? When I test this in Chrome it shows ‣ FormData {append: function} ... which is to say it's a FormData object, which is what we expected. I made a fiddle and expanded to code to this:

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


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

...and this is what I saw in the Chrome Developer Tools Network panel:

HTTP request

So the code is working as expected.

I think the disconnect here is that you're expecting FormData to work like a vanilla JavaScript object or array and let you directly look at and manipulate its contents. Unfortunately it doesn't work like that—FormData only has one method in its public API, which is append. Pretty much all you can do with it is create it, append values to it, and pass it to an XMLHttpRequest.

If you want to get the form values in a way you can inspect and manipulate, you'll have to do it the old-fashioned way: by iterating through the input elements and getting each value one-by-one—or by using a function written by someone else, e.g. jQuery's. Here's an SO thread with a few approaches to that: How can I get form data with JavaScript/jQuery?

小开

I faced the same problem as well. I wasn't able to see on the console. You need to add the following to the ajax request, so the data will be sent

processData: false, contentType: false
小开
最佳答案

Update: the XHR spec now includes several more functions to inspect FormData objects.

FireFox has supported the newer functions since v39.0, Chrome is slated to get support in v50. Not sure about other browsers.

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)
小开

As per MDN documentation on FormData

An object implementing FormData can directly be used in a for...of structure, instead of entries(): for (var p of myFormData) is equivalent to for (var p of myFormData.entries()).

Iterating over FormData.entries() didn't worked for me.

Here is what I do to check if formData is empty or not:

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

As iterating over formData gives you the uploaded file, you can use it for getting the file name, file type validation, etc.


提交答案