小粋空間  -  a cheap joke and a play on words site

JavaScriptのFormDataの使い方

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

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

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

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

２．FormDataオブジェクトを作成する

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

var fd = new FormData();

３．フォームデータを取得する

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要素内のフォームデータが取得できます。

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

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

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

fd.append("number", 123456);

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

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

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

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

HTMLが

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

となっている場合、

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

とします。

６．FormDataオブジェクトを送信する

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

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

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

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

７．参考サイト

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

• FormData オブジェクトの利用
• How to use FormData for ajax file upload
• ファイルアップロードで必須となる3つの手順