Question

我有一个FormData对象，我在javascript中从HTML形式创建，就像这样。 FormData对象似乎没有很好的记录（可能只是我在搜索错误的东西！）。

var form = new FormData(document.getElementById("form"));

我的问题

如何在发送之前访问此FormData对象的不同输入值？例如。 form.name使用名称form.name访问输入到输入中的值。

Answer 1

您似乎无法使用 FormData 获取表单元素的值。

FormData 对象允许您编译要发送的一组键/值对使用XMLHttpRequest。 主要用于发送表单数据，但可以独立于表单使用，以便传输密钥数据。传输的数据格式与表格相同如果表单的编码类型，submit（）方法将用于发送数据被设置为“multipart / form-data”。

但是你可以使用像这样的简单Javascript来实现它

var formElements = document.forms['myform'].elements['inputTypeName'].value;

Answer 2

首先我认为不可能像你指定的那样从表单构建FormData对象，并且从表单中获取值使用接受的答案中描述的方法 - 这更像是一个附录！

看起来你可以从formdata对象中获取一些数据：

var formData = new FormData();
formData.append("email", "test1@test.com");
formData.append("email", "test2@test.com");
formData.get("email");

不幸的是，这只会返回该密钥的第一个项，在这种情况下它将返回'test1@test.com'

另请参阅：MDN article on formdata get method

希望这有帮助！

另请注意，如果您想在Chrome中测试此内容，则必须启用实验性网络功能标记：

注意：除了追加以外的方法的Chrome支持目前落后 “启用实验性Web平台功能”标志。

MDN page; in the browser compatibility section

Answer 3

FormData.get将在一小部分浏览器中执行您想要的操作 - 查看浏览器兼容性图表以查看哪些（目前只有Chrome 50+和Firefox 39+）。鉴于这种形式：

<form id="form">
  <input name="inputTypeName">
</form>

您可以通过

访问该输入的值

var form = new FormData(document.getElementById("form"));
var inputValue = form.get("inputTypeName");

Answer 4

只需添加@Jeff Daze的上一个解决方案 - 您可以使用FormData.getAll("key name")函数从对象中检索所有数据。

Answer 5

这是从FormData中检索键值对的解决方案：

var data = new FormData( document.getElementById('form') );
data = data.entries();              
var obj = data.next();
var retrieved = {};             
while(undefined !== obj.value) {    
    retrieved[obj.value[0]] = obj.value[1];
    obj = data.next();
}
console.log('retrieved: ',retrieved);

Answer 6

根据MDN：

实现FormData的对象可以直接在for ... of中使用结构，而不是entrys（）：对于（myFormData的var p）为等同于for（myFormData.entries（）的var p）

因此，您可以像这样访问FormData值：

errno

Answer 7

另一种解决方案：
HTML：

<form>
<input name="searchtext"  type="search" >'
<input name="searchbtn" type="submit" value="" class="sb" >
</form>

JS：

$('.sb').click( function() {
    var myvar=document.querySelector('[name="searchtext"]').value;
    console.log("Variable value: " + myvar);
});

Answer 8

它将起作用

let form = document.querySelector("form");
let data = new FormData(form)
formObj = {};
for (var pair of data.entries()) {
  formObj[pair[0]] = pair[1]
}
console.log(formObj)

Answer 9

如果您要获取或添加FormData的内容，则应使用以下方法：

假设您要像这样上传图片：

<input type="file" name="image data" onChange={e => 
uploadPic(e)} />

关于更改处理程序功能：

const handleChange = e => {
    // Create a test FormData object since that's what is needed to save image in server

   let formData = new FormData();

    //adds data to the form object

    formData.append('imageName', new Date.now());
    formData.append('imageData', e.target.files[0]);

}

追加：将条目添加到创建的formData对象中，其中imageData是键，而e.target.files [0]是属性

您现在可以将此包含图像数据的imageData对象发送到服务器进行处理

但要确认此formData是否具有简单的console.log（formData）值/不会执行此操作，您应该这样做：

//don't forget to add this code to your on change handler 
function
for (var value of formData.values()) {
   console.log(value); 
}

///我希望能解释我的答案，它适用于原始JavaScript和React.js ...感谢您的投票

Answer 10

我对for-of的解决方案

const formData = new FormData(document.getElementById('form'))

for (const [key, value] of formData) {
  console.log('»', key, value)
}

Answer 11

使用 runarberg / formsquare 库（.highlighted_fileName + span i{ Color:#fff: }）的简单HTML5方法（从表单到对象）：

npm i --save formsquare

https://github.com/runarberg/formsquare

访问FormData值

11 个答案: