FormData.append(“ key”,“ value”)不起作用


107

你能告诉我这是怎么回事:

var formdata = new FormData();
formdata.append("key", "value");
console.log(formdata);

我的输出看起来像这样,我找不到我的“键”-“值”对

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都相同:/

Answers:


127

Chrome 50+和Firefox 39+(版本44+)中的新功能:

  • formdata.entries()(与Array.from()可调试性结合使用)
  • formdata.get(key)
  • 还有更多非常有用的方法

原始答案:

我通常要做的是“调试” FormData对象,只是将其发送(到任何地方!)并检查浏览器日志(例如Chrome devtools的“网络”标签)。

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

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

简单。


谢谢-这是通过在Chrome控制台中键入FormData对象来获取它的一种有用的快速方法。
Dan Smart

根据Google的 FormData方法,Chrome v50中已添加。
thdoan '16

如果它是像Safari这样的移动浏览器,您如何看待浏览器日志?我在打算用于移动设备的Web应用程序中使用FormData对象,但无法弄清楚如何对其进行调试。
kiwicomb123 '16

1
@ kiwicomb123 Formdata.entries()+ Array.from()+ alert()如果足够现代,或者考虑进行移动调试
Rudie 2016年

所以没有优势或ie11?
SuperUberDuper

50

您说它不起作用。您期望发生什么?

无法将数据从FormData对象中取出。它只是供您用来与XMLHttpRequest对象一起发送数据(用于send方法)。

将近五年后进行更新:在某些较新的浏览器中,这已不再是对的,您现在不仅可以将数据FormData填充到其中,还可以看到所提供的数据。有关更多信息,请参见接受的答案


20
好...这太烂了。为什么我不能在控制台中记录FormData?:-(这对我来说毫无意义,因为我认为这是一个常见的对象
netzaffin 2011年

12
@netzaffin:只要打开了“网络”标签并开始记录日志,Firebug和Chrome的检查器都可以让您在XHR请求中查看已发送的请求参数,因此您应该可以通过它。您还可以创建一个包装器对象,该对象记录字段并追加到FormData,然后检查其值(不要忘记发送内部FormData而不是包装器对象)。
Jesper,

1
至少,我可以检查formdata对象中是否有文件?
MarceloBarbosa 2015年

1
@MarceloBarbosa:似乎您无法从中获取任何信息。您只需要自己保留此信息。
杰斯珀,2015年

正如@Jesper指出的那样,您可以在Developer tools的network标签中检查发送的XHR请求,那里有Params选项,甚至可以让您查看发送的POST请求的内容。也是回应。
阿尼鲁斯

23

您可能遇到了我最初遇到的相同问题。我试图使用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){
    //...
}

17

如果您使用的是Chrome浏览器,则可以查看发布数据

这是如何检查过帐数据

  1. 转到网络标签
  2. 查找您要发送数据的链接
  3. 点击它
  4. 在标题中,您可以选中“请求有效载荷”以检查帖子数据

Chrome的DevTools



5

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

for (var data of formData) {
  console.log(data);
}

尝试这种方式它将显示


2

就我而言,在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();

2

反应版本

确保标题包含 '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
 <input className="form-control"
    type="file" 
    onChange={(e)=>this._handleImageChange(e)} 
 />
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.