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 属性値を抽出し、1つの 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);
})();

　　上に戻る　前のページに戻る

メニュートップ更新履歴 Flash ゲーム今すぐプレイ Flash ムービー今すぐプレイ JavaScript プログラミング講座 Adobe AIR プログラミング講座 ActionScript3.0 ゲームプログラミング講座 ActionScript1.0 ゲームプログラミング講座 Flash 拡張機能今すぐダウンロード Browser 拡張機能今すぐダウンロード　　　 Author atom / twitter

2002-2018 / 解像度1024×768以上 / IE8.0以上推奨 / by Hakuhin