JavaScript プログラミング講座

 

FormData クラスについて

 


■ FormData クラスについて

 
FormData クラスは、HTML5 世代の機能です。
 
http://www.w3.org/TR/XMLHttpRequest2/#interface-formdata (Working Draft)
 
<FORM> 要素内には、コントロール要素を配置することができます。
 
<INPUT> や <TEXTAREA> 要素などが該当します。
 
コントロール要素には、namevalue 属性が存在します。
 
<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> 要素内に存在する、すべてのコントロール要素の namevalue 属性値を抽出し、1つの FormData オブジェクトにまとめる事ができます。
 
XMLHttpRequest クラスを使うと、FormData オブジェクトを外部に送信する事ができます。
 
■その他の注意点
 
FormData オブジェクトを使って、元の <FORM> 要素を変化させる事はできません。
 
FormData オブジェクトから、データを取り出す事はできません。
 
FormData オブジェクトに、データを追加する事はできます。
 

■ FormData に対応しているか調べる

 
FormData に対応しているか調べるには、window.FormData が真であるか比較します。
 
InternetExplorer 9 以前では、対応していません。
 
FormData に対応しているか調べる

// FormData に対応している
if(window.FormData){

	alert("FormData に対応している");

}else{

	alert("FormData に対応していない");

}
 
 
 

 

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

 


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

 
new 演算子を使って、FormData オブジェクトを作成します。
 
new FormData( HTMLFormElement ) :FormData
第01引数(略可)HTMLFormElementフォーム要素を指定
戻り値 FormDataFormData
 
■第01引数(HTMLFormElement)
 
データの抽出を行う、フォーム要素を指定します。
 
<FORM> 要素内に、コントロール要素が存在している必要があります。
 
すべてのコントロール要素の、namevalue 属性値が抽出されます。
 
フォームを指定して、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引数 Stringname 属性値を文字列で指定。
第02引数 Stringvalue 属性値を文字列で指定。
戻り値 Voidなし
 
FormData.append( "name" , Blob , "ファイル名" ) :Void
第01引数 String名前を文字列で指定。
第02引数 BlobBlobFile オブジェクトを指定。
第03引数(略可)String第02引数で指定した Blob オブジェクトのファイル名を指定。
戻り値 Voidなし
 
■第02引数(値)
 
value 属性値を文字列で指定します。
 
BlobFile オブジェクトを指定することもできます。
 
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);
})();