FormDataオブジェクトの生成方法がわかりません

###前提・実現したいこと
任意のformのDOMをコンストラクタで指定してやりFormDataオブジェクトを生成したい。

###発生している問題・エラーメッセージ
以下のソースコードで変数formDataAに空のFormDataオブジェクトが代入されています。
理由はどのようなことが考えられるでしょうか？
どうも私が根本的に使い方を間違っているような気がします。お気づきの点あればご指摘のほどよろしくお願いします。

###該当のソースコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
function upload_func(){
    if(window.FormData){
        console.log("true");
    }else{
        console.log("false");
    }

    var formdataA = new FormData($('#my_form').get(0));
    console.log(formdataA);
    formdataA.append('username', 'tanaka');
    console.log(formdataA);
}
</script>

<form id="my_form">
    <input type="file" name="fileX">
    <input type="text" name="character" value="aiueo">
    <button type="button" onclick="upload_func()">アップロード</button>
</form>

###コンソールの出力結果
true
FormData {}
FormData {}

###補足情報(言語/FW/ツール等のバージョンなど)
検証でためしたブラウザは以下2つです。
GoogleChrome 53.0.2785.143
FireFox 49.0.1

shi_ue

2016/10/19 05:44

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

たしか、FormDataはconsoleに出すことができなかったと思いますよ。

forEachメソッドで確認してみたらどうでしょうか？

javascript
1formdataA.forEach(function(element, index, array) {
2  console.log(index);
3});

投稿2016/10/19 05:45

編集2016/10/19 05:52

shi_ue

総合スコア4437

think49

2016/10/19 05:54 編集

> たしか、FormDataはconsoleに出すことができなかったと思いますよ。 Google Chrome 54.0.2840.59 mでは console.log(new FormData) で出力可能でした。何か条件があるのでしょうか。

shi_ue

2016/10/19 05:54

ちょっと回答が悪かったですね。たぶん質問者は、FormDataの中身（コピーしたフォームの内容）が羅列されるようなイメージをもっておられるのではないでしょうか？それを直接見ることは出来ないよ、という意味でした。

think49

2016/10/19 06:09

To: shi_ue さんなるほど。確かにオブジェクト初期化子のようにコンソールにkey+valueが列挙されるわけではないですね。 https://jsfiddle.net/zt3negyg/ 理解しました。補足ありがとうございます。

ma2_2013s

2016/10/19 06:10

shu_ueさん forEachメソッドで確認してみたところ、各input要素のnameが表示されました。 console.log()で直接みれないオブジェクトもあるのですね。というよりも深い階層に入っているということでしょうか。大変勉強になりました。そして助かりました。<code>のご指摘ありがとうございした。

行動規範の内容に同意します