javascript - FormData.append(“key”，“value”)不起作用

你能告诉我这是错的吗：

var formdata = new FormData();

formdata.append("key", "value");

console.log(formdata);

我的输出看起来像这样，我找不到我的＆＃34;键＆＃34; - ＆＃34;价值＆＃34; 对

FormData

*__proto__: FormData

**append: function append() { [native code] }

***arguments: null

***caller: null

***length: 0

***name: "append"

***prototype: append

***__proto__: function Empty() {}

*constructor: function FormData() { [native code] }

**arguments: null

**caller: null

**length: 0

**name: "FormData"

**prototype: FormData

**toString: function toString() { [native code] }

*__proto__: Object

**__proto__: Object

**__defineGetter__: function __defineGetter__() { [native code] }

**__defineSetter__: function __defineSetter__() { [native code] }

**__lookupGetter__: function __lookupGetter__() { [native code] }

**__lookupSetter__: function __lookupSetter__() { [native code] }

**constructor: function Object() { [native code] }

**hasOwnProperty: function hasOwnProperty() { [native code] }

**isPrototypeOf: function isPrototypeOf() { [native code] }

**propertyIsEnumerable: function propertyIsEnumerable() { [native code] }

**toLocaleString: function toLocaleString() { [native code] }

**toString: function toString() { [native code] }

**valueOf: function valueOf() { [native code] }

我无法理解！ 昨天它工作得很好，今天我的头撞了很多次键盘！ Firefox，Chrome，都是一样的：/

8个解决方案

107 votes

Chrome 50+和Firefox 39+(分别为44+)的新功能：

FormData(结合Array.from()进行调试)

FormData

以及更有用的方法

原始答案：

我通常做的是调试＆＃39; 一个FormData对象，只是发送它(任何地方！)并检查浏览器日志(例如Chrome devtools＆＃39; Network选项卡)。

您不需要/相同的Ajax框架。 你不需要任何细节。 只需发送：

var xhr = new XMLHttpRequest;

xhr.open('POST', '/', true);

xhr.send(data);

简单。

Rudie answered 2019-08-11T10:15:55Z

51 votes

你说它不起作用。 你期待发生什么？

没有办法从FormData对象中获取数据; 它只是用于发送数据和XMLHttpRequest对象(对于send方法)。

大约五年后更新：在一些较新的浏览器中，这已不再适用，您现在可以看到提供给FormData的数据以及仅将数据填入其中。 有关详细信息，请参阅接受的答案。

Jesper answered 2019-08-11T10:16:37Z

17 votes

您可能遇到了我最初遇到的同样问题。 我试图使用FormData来获取所有输入文件以上传图像，但同时我想将会话ID附加到传递给服务器的信息中。 这一次，我想通过附加信息，你可以通过访问对象在服务器中看到它。 我错了。 当您附加到FormData时，检查服务器上附加信息的方法是通过简单的$_POST['*your appended data*']查询。 像这样：

JS：

$('form').submit(function(){

var sessionID = 8;

var formData = new FormData(this);

formData.append('id', sessionID);

$.ajax({

url: "yoururl.php",

data: formData,

processData: false,

contentType: false,

type: 'POST',

success: function(data){

alert(data);

}

});

});

然后在PHP上：

$sessionID = $_POST['id'];

$files = $_FILES['image'];

$foreach ($files as $key=>val){

//...

}

CodeGodie answered 2019-08-11T10:17:13Z

16 votes

如果您使用的是Chrome，则可以查看发布数据

以下是如何检查发布数据

转到网络选项卡

查找要向其发送Post Data的链接

点击它

在标题中，您可以检查请求有效负载以检查发布数据

madhu131313 answered 2019-08-11T10:18:15Z

8 votes

你可以看到你需要使用console.log(formData.getAll('your key'));看着[https://developer.mozilla.org/en-US/docs/Web/API/FormData/getAll]

yehonatan yehezkel answered 2019-08-11T10:18:40Z

2 votes

在我的情况下在Edge浏览器上：

const formData = new FormData(this.form);

for (const [key, value] of formData.entries()) {

formObject[key] = value;

}

给我同样的错误

所以我没有使用FormData，我只是手动构建一个对象

import React from 'react';

import formDataToObject from 'form-data-to-object';

...

let formObject = {};

// EDGE compatibility - replace FormData by

for (let i = 0; i < this.form.length; i++) {

if (this.form[i].name) {

formObject[this.form[i].name] = this.form[i].value;

}

}

const data = formDataToObject.toObj(formObject): // convert "user[email]":"customer@mail.com" => "user":{"email":"customer@mail.com"}

const orderRes = await fetch(`/api/orders`, {

method: 'POST',

credentials: 'same-origin',

headers: {

'Content-Type': 'application/json'

},

body: JSON.stringify(data)

});

const order = await orderRes.json();

Ramadanoski Julie answered 2019-08-11T10:19:21Z

0 votes

反应版本

请确保标题为'content-type': 'multipart/form-data'

_handleSubmit(e) {

e.preventDefault();

const formData = new FormData();

formData.append('file', this.state.file);

const config = {

headers: {

'content-type': 'multipart/form-data'

}

}

axios.post("/upload", formData, config)

.then((resp) => {

console.log(resp)

}).catch((error) => {

})

}

_handleImageChange(e) {

e.preventDefault();

let file = e.target.files[0];

this.setState({

file: file

});

}

视图

#html

type="file"

onChange={(e)=>this._handleImageChange(e)}

/>

7urkm3n answered 2019-08-11T10:19:55Z

0 votes

表单数据不会出现在Web浏览器控制台中

for (var data of formData) {

console.log(data);

}

尝试这种方式它会显示

Dulanga Heshan answered 2019-08-11T10:20:28Z