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

Question

你能告诉我这是错的吗:

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,都是一样的:/

Answer 1

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

简单.

Answer 2

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

没有办法从FormData对象中获取数据; 它只是用于将数据与XMLHttpRequest对象一起发送(对于send方法).

大约五年后更新:在一些较新的浏览器中,这已不再适用FormData,除了只是将数据填入其中之外,您现在还可以看到提供的数据.有关详细信息,请参阅接受的答案.

Answer 3

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

Answer 4

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

以下是如何检查发布数据

1. 转到网络选项卡
2. 查找要向其发送Post Data的链接
3. 点击它
4. 在标题中,您可以检查请求有效负载以检查发布数据

Answer 5

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

Answer 6

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

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

试试这种方式它会显示