Formdata object shows empty even after calling append
<p>Append in formdata Object shows empty.</p>

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

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The output of the above code in the console log gives me</p>

<pre><code>Formdata{}
append:function append()
arguments:null
caller:null
length:2
name:"append"
</code></pre>

<p>whereas <code>console.log($("#file")[0].files[0])</code> gives me File <code>{name: "document.pdf", lastModified: 1462959300000, lastModifiedDate: Wed May 11 2016 15:05:00 GMT+0530 (IST), webkitRelativePath: "", size: 5275…}</code></p>

<p>Why is append for formdata not working?</p>