Question

在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…}

为什么附加formdata不起作用？

Answer 1

实际上附加IS WORKING。但是你不能那样记录。要查看您的内容，请尝试以下操作：

<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个控制台语句的相同代码的屏幕截图。首先是你的文件[0]对象。第二个是你的对[0] +'，'+对1。第三个是您的表单对象，在您报告时它将为空。

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

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

Answer 2

我认为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文档

Answer 3

一种更简单的记录formData的方法是使用.get（）方法。

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

视情况而定。

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

3 个答案: