112

你能告诉我这有什么问题吗：

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，都一样：/

4

8 回答 8

134

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);

简单的。

于 2012-12-30T16:36:54.287 回答
51

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

无法从FormData对象中获取数据；它只是供您用来与XMLHttpRequest对象（用于send方法）一起发送数据。

大约五年后更新：在一些较新的浏览器中，这不再是真的，您现在可以看到提供的数据FormData，除了将数据填充到其中。有关更多信息，请参阅接受的答案。

于 2011-10-13T09:53:29.607 回答
25

您可能遇到了与我最初遇到的相同的问题。我试图使用 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){
    //...
}
于 2013-08-04T01:37:00.803 回答
17

如果您在 Chrome 中，您可以查看发布数据

这是如何检查发布数据

  1. 转到网络选项卡
  2. 查找您发送帖子数据的链接
  3. 点击它
  4. 在 Headers 中，您可以检查 Request Payload 以检查帖子数据

Chrome 的开发者工具

于 2014-07-14T18:41:46.210 回答
10

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

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

试试这种方式它会显示

于 2018-11-04T10:45:39.033 回答
8

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

于 2015-10-29T10:37:30.437 回答
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();
于 2018-08-02T09:51:00.427 回答
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)} 
 />
于 2018-10-17T16:31:37.983 回答