JavaScriptのFormDataの使い方

JavaScriptのFormDataの使い方

Posted at October 7,2014 12:55 AM
Tag:[JavaScript]

JavaScriptのFormDataの使い方についてまとめました。

FormDataの使い方

1.ブラウザがFormDataオブジェクトに対応するか確認する

ブラウザがFormDataオブジェクトに対応するか確認するには、window.FormDataで判定します。

if( window.FormData ){
    alert("対応しています");
} else {
    alert("対応していません");
}

2.FormDataオブジェクトを作成する

FormDataオブジェクトを作成するにはnew()を利用します。

var fd = new FormData();

3.フォームデータを取得する

new()と同時にフォームデータを取得することもできます。

次のHTMLを想定します。

<form id="foo" name="foo">
…中略…
</form>

この場合、次のようにオブジェクト作成します。

var fd = new FormData($('#foo').get(0));

または、

var fd = new FormData(document.getElementById("foo"));

または、

var fd = new FormData(document.forms.namedItem("foo"));

これでFormDataオブジェクトに、指定したform要素内のフォームデータが取得できます。

4.FormDataオブジェクトにパラメータを追加する

FormDataにパラメータを追加するには、append()を用います。

numberというパラメータに「123456」という数値を追加する場合は次のようにします。

fd.append("number", 123456);

charというパラメータに「abc」という文字列を追加する場合は次のようにします。

fd.append("char", "abc");

5.FormDataオブジェクトにファイルを直接追加する

FormDataオブジェクトにファイルを追加する場合もappend()を用います。

HTMLが

<form ... >
<input id="foo" name="hoge" type="file" />
</form>

となっている場合、

fd.append('hoge', $('input[type=file]')[0].files[0]);

とします。

6.FormDataオブジェクトを送信する

jQueryでFormDataオブジェクトを送信するには次のようにします。

$.ajax({
    url: "test.cgi",
    type: "POST",
    data: fd,
})
.done(function( data ) {
    // 略
});

ファイルを送信する場合は「jQuery.ajax()でファイルをアップロードする方法」で紹介したとおり、processDataとcontentTypeを追加してください。

その他、Blobオブジェクトを送信する方法もあるようですが、ここでは割愛します。

7.参考サイト

参考サイトは下記です。ありがとうございました。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)