HTML5でJavaScriptにFormDataが実装されたことで、フォームデータの扱いがすごく楽になった。
てことで、使い方をざっとまとめてみる。

FormDataオブジェクトとは

formのDOMオブジェクトを放り込んであげることで、キーとバリューのペアを格納したFormDataオブジェクトを作ることができる。
FormDataオブジェクトはXMLHttpRequestのsend()メソッドでそのまま送信することが可能。
つまりはjQueryの$.ajaxでそのまま送信できる。

効果的な利用法

Ajaxでフォームを送信する際に非常に便利。
FormDataが実装される前は、ファイルの非同期アップロードにiframeを使う面倒な実装が必要だったが、FormDataを使うことでファイルもそのまま送信できる。

オブジェクトの作り方

var formData = new FormData(formのDOMオブジェクト);
// メソッドはappend(key, value)しか無いっぽい。これでパラメータを書き換える。
formData.append('hoge', 'fuga');

jQueryでの利用例

<form id="hoge">...略...</form>
<script type="text/javascript">
    var formData = new FormData($('#hoge').get(0));
    $.ajax('POST先URL', {
        method: 'POST',
        data: formData,
        dataType: 'html',
        success: function(data) {
            console.log(data);
        }
    });
</script>

ブラウザの実装状況

Chrome/FireFox/Safariは現最新版は確実に使える。(結構前から実装されてた模様
IEは10以降でしか使えない。ここでも足を引っ張るIE様。

個人的には、IE9以前を切り捨ててでも恩恵に与りたい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Name *
Email *
Website

*