FormData クラスについて

・	FormData クラスについて
・	FormData オブジェクトを作成する
・	FormData オブジェクトにデータを追加する
・	FormData オブジェクトを送信する

前のページに戻る

FormData クラスについて

■ FormData クラスについて

FormData クラスは、HTML5 世代の機能です。

https://xhr.spec.whatwg.org/#interface-formdata

<FORM> 要素内には、コントロール要素を配置することができます。

<INPUT> や <TEXTAREA> 要素などが該当します。

コントロール要素には、name と value 属性が存在します。

<FORM> 要素内に、コントロール要素を配置する


    <form action="http://example.com/cgi-bin/upload.cgi" method="post" enctype="multipart/form-data" >

      <textarea name="my_textarea"> 値 </textarea> <br>

      <input type="text"   name="my_text"   value="値"> <br>
      <input type="hidden" name="my_hidden" value="値"> <br>
      <input type="file"   name="my_file"> <br>

      <input type="submit" value="送信">

    </form>

■ FormData クラスの主な機能

<FORM> 要素内に存在する、すべてのコントロール要素の name と value 属性値を抽出し、１つの FormData オブジェクトにまとめる事ができます。

XMLHttpRequest クラスを使うと、FormData オブジェクトを外部に送信する事ができます。

■その他の注意点

FormData オブジェクトを使って、元の <FORM> 要素を変化させる事はできません。

FormData オブジェクトから、データを取り出す事はできません。

FormData オブジェクトに、データを追加する事はできます。

■ブラウザが FormData をサポートしているか調べる

window.FormData が真であるか比較します。

InternetExplorer 9 以前では、対応していません。

上に戻る

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

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

new 演算子を使って、FormData オブジェクトを作成します。

new FormData( HTMLFormElement ) :FormData

第01引数(略可)	HTMLFormElement	フォーム要素を指定
戻り値	FormData	FormData

■第01引数（HTMLFormElement）

データの抽出を行う、フォーム要素を指定します。

<FORM> 要素内に、コントロール要素が存在している必要があります。

すべてのコントロール要素の、name と value 属性値が抽出されます。

フォームを指定して、FormData オブジェクトを作成する


<html>
  <body>

    <form id="my_form" action="http://example.com/cgi-bin/upload.cgi" method="post" enctype="multipart/form-data" >

      <textarea name="my_textarea">!! MY VALUE A !!</textarea> <br>

      <input type="text"   name="my_text"   value="!! MY VALUE B !!"> <br>
      <input type="hidden" name="my_hidden" value="!! MY VALUE C !!"> <br>
      <input type="file"   name="my_file"> <br>

      <input type="submit" value="送信">

    </form>

    <script type="text/javascript">
    <!--
	// 匿名関数を即時実行
	(function(){

		// ------------------------------------------------------------
		// FormData に対応していない
		// ------------------------------------------------------------
		if(!(window.FormData)) return;

		// ------------------------------------------------------------
		// フォーム要素を取得する
		// ------------------------------------------------------------
		// id 属性が、"my_form" であるエレメントを取得
		var form = document.getElementById("my_form");

		// ------------------------------------------------------------
		// サブミット直前に実行されるイベント
		// ------------------------------------------------------------
		form.addEventListener("submit" , function(e){

			// ------------------------------------------------------------
			// デフォルトの動作をキャンセル（フォームの送信を中止）
			// ------------------------------------------------------------
			e.preventDefault();

			// ------------------------------------------------------------
			// FormData オブジェクトを作成する
			// ------------------------------------------------------------
			var form_data = new FormData(form);

			// 出力テスト
			console.log(form_data);

			// ------------------------------------------------------------
			// XMLHttpRequest を使った通信
			// ------------------------------------------------------------
			// XMLHttpRequest オブジェクトを作成
			//var xhr = new XMLHttpRequest();

			// 「POST メソッド」「接続先 URL」を指定
			//xhr.open("POST" , form.action);

			// 送信データに FormData を指定、XHR 通信を開始する
			//xhr.send(form_data);
		});

	})();
    //-->
    </script>

  </body>
</html>

上に戻る

FormData オブジェクトにデータを追加する

■FormData オブジェクトにデータを追加する

FormData オブジェクトに、データを追加するには、append() メソッドを使用します。

FormData.append( "name" , "value" ) :Void

第01引数	String	name 属性値を文字列で指定。
第02引数	String	value 属性値を文字列で指定。
戻り値	Void	なし

FormData.append( "name" , Blob , "ファイル名" ) :Void

第01引数	String	名前を文字列で指定。
第02引数	Blob	Blob や File オブジェクトを指定。
第03引数(略可)	String	第02引数で指定した Blob オブジェクトのファイル名を指定。
戻り値	Void	なし

■第02引数（値）

value 属性値を文字列で指定します。

Blob や File オブジェクトを指定することもできます。

File オブジェクトの取得方法については、こちらで解説しています。

■使用例

FormData オブジェクトに、データを追加する


// ------------------------------------------------------------
// FormData オブジェクトを作成する
// ------------------------------------------------------------
var form_data = new FormData();

// ------------------------------------------------------------
// name と value を指定してデータを追加する
// ------------------------------------------------------------
form_data.append("aaa","value_a");
form_data.append("bbb","value_b");
form_data.append("ccc","value_c");

ファイルのドラッグアンドドロップを検出して、FormData オブジェクトにデータを追加する


<html>
  <body>

    <div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>

    <script type="text/javascript">
    <!--
	// 匿名関数を即時実行
	(function(){

		// ------------------------------------------------------------
		// FormData に対応していない
		// ------------------------------------------------------------
		if(!(window.FormData)) return;

		// ------------------------------------------------------------
		// "bbb" という ID 属性のエレメントを取得する
		// ------------------------------------------------------------
		var element = document.getElementById("bbb");

		// ------------------------------------------------------------
		// FormData オブジェクトを作成する
		// ------------------------------------------------------------
		var form_data = new FormData();

		// ------------------------------------------------------------
		// ドラッグ操作中に実行されるイベント（マウスカーソルが要素内に滞在中）
		// ------------------------------------------------------------
		element.addEventListener("dragover" , function (e){
			// ドロップを許可し受け入れを表明
			e.preventDefault();
		});

		// ------------------------------------------------------------
		// ドロップ時に実行されるイベント
		// ------------------------------------------------------------
		element.addEventListener("drop" , function (e){

			// ------------------------------------------------------------
			// DataTransfer オブジェクトを取得する
			// ------------------------------------------------------------
			var data_transfer = e.dataTransfer;

			// ------------------------------------------------------------
			// ファイルを取得する（HTML5 世代）
			// ------------------------------------------------------------
			var file_list = data_transfer.files;
			if(file_list){
				var i;
				var num = file_list.length;
				for(i=0;i < num;i++){
					// File オブジェクトを取得
					var file = file_list[i];

					// ファイル名を取得
					var file_name = file.name;

					// name と File オブジェクトを指定してデータを追加する
					form_data.append(file_name,file);

					// 出力テスト
					console.log(file_name);
				}
			}

			// ------------------------------------------------------------
			// デフォルトのドロップ機能を無効化する
			// ------------------------------------------------------------
			e.preventDefault();
		});

	})();

    //-->
    </script>

  </body>
</html>

上に戻る

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

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

FormData オブジェクトを外部に送信するには、XMLHttpRequest クラスを使用します。

XMLHttpRequest クラスについては、こちらで解説しています。

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


// 匿名関数を即時実行
(function(){

	// ------------------------------------------------------------
	// FormData に対応していない
	// ------------------------------------------------------------
	if(!(window.FormData)) return;

	// ------------------------------------------------------------
	// FormData オブジェクトを作成する
	// ------------------------------------------------------------
	var form_data = new FormData();

	// ------------------------------------------------------------
	// 名前と値を指定してデータを追加する
	// ------------------------------------------------------------
	form_data.append("aaa" , "value_a");
	form_data.append("bbb" , "value_b");
	form_data.append("ccc" , "value_c");

	// ------------------------------------------------------------
	// XMLHttpRequest オブジェクトを作成
	// ------------------------------------------------------------
	var xhr = new XMLHttpRequest();

	// ------------------------------------------------------------
	// 「POST メソッド」「接続先 URL」を指定
	// ------------------------------------------------------------
	xhr.open("POST" , "http://example.com/cgi-bin/upload.cgi");

	// ------------------------------------------------------------
	// 送信データに FormData を指定、XHR 通信を開始する
	// ------------------------------------------------------------
	xhr.send(form_data);
})();

上に戻る

前のページに戻る