即使在调用 append 之后，Formdata 对象也显示为空答案

【问题标题】：Formdata object shows empty even after calling append即使在调用 append 之后，Formdata 对象也显示为空
【发布时间】：2019-07-30 02:36:46
【问题描述】：

在formdata中追加对象显示为空。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var formy = new FormData();
        formy.append("file", $("#file")[0].files[0]);
        console.log(formy);
});
});
</script>
</head>
<body>
<input id="file" type="file" size="40"><br><br>
<button>Send an HTTP POST request to a page and get the result back</button>

</body>
</html>

上面代码在控制台日志中的输出给了我

Formdata{}
append:function append()
arguments:null
caller:null
length:2
name:"append"

而console.log($("#file")[0].files[0]) 给了我文件{name: "document.pdf", lastModified: 1462959300000, lastModifiedDate: Wed May 11 2016 15:05:00 GMT+0530 (IST), webkitRelativePath: "", size: 5275…}

为什么附加表单数据不起作用？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

实际上追加是有效的。但是您不能以这种方式登录。要查看您的内容，请尝试以下操作：

<script>
$(document).ready(function(){
    $("button").click(function(){
        var formy = new FormData();
        formy.append("file", $("#file")[0].files[0]);

    for(var pair of formy.entries()) {
      console.log(pair[0]+', '+pair[1]);
    }

});
});
</script>

我添加了带有 3 个控制台语句的相同代码的屏幕截图。首先是您的 files[0] 对象。其次是你的pair[0] + ', ' + pair1。第三是您的表单对象，在您报告时它将为空。

可以在此处阅读为什么以及如何发生这种情况。在这里复制理论没有意义。

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

【讨论】：

【解决方案2】：

记录 formData 的更简单方法是使用 .get() 方法。

console.log(formy.get("firstname"))
console.log(formy.get("lastname"))

视情况而定。

【讨论】：

【解决方案3】：

我认为 DOM 文件属性在追加时出错，因此无法识别 DOM 中的文件属性，导致调用者为空异常。而且 FormData() 必须返回一个被初始化的选择器。试试这个

    <!DOCTYPE html>
    <html>
    <head>
        <script src="scripts/jquery-2.2.1.js"></script>
        <script>
    $(document).ready(function(){
        $("button").click(function(){
            //var formy = new FormData(); 
            //formy must return valid DOM selector and since our FormData code is unknown,I am using Div as example
            //formy.append($('input[type="file"]'), $("#file")[0].files[0]); 
            $('#div1').append($('input[type="file"]'), $("#file1")[0].files[0])
//Now no null encountered
//   console.log($('div').append($('input[type="file"]'), $("#file1")[0].files[0]));
    });
    });
        </script>
    </head>
    <body>
        <input id="file1" type="file" size="40"><br><br>
        <button>Send an HTTP POST request to a page and get the result back</button>
        <div id="div1"></div>
    </body>
    </html>

因为 :file 是 jQuery 扩展而不是 CSS 规范的一部分，使用 :file 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用 [type="file"]。 SRC:jQuery Api 文档

【讨论】：

@KanikaMidha 如果您还有问题，请告诉我。 :)
我遇到了同样的问题。