XHRで非同期ファイルアップロード

Yahoo! UI LibraryのConnection Managerを使うとXHRで非同期ファイルアップロードが可能です。

アップロードするファイルを選択するフォームを用意し、Connection Managerに関連付けます。
- フォームは必須です。また、アップロードするファイルはユーザーが選択する必要があります。
- クライアントの任意のファイルをバックグラウンドで勝手にアップロードしたりはできません。(当たり前)
あとは、POSTリクエストを送付するだけ。引数でコールバック関数を定義したオブジェクトを渡します。

以下はサンプルです。ファイルアップロードを受け付けるCGIの簡単なサンプルで作成したCGIを使っています。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <!-- 依存モジュールをロード -->
  <script src="http://yui.yahooapis.com/2.3.0/build/yahoo/yahoo-min.js"></script> 
  <script src="http://yui.yahooapis.com/2.3.0/build/event/event-min.js"></script> 
  <script src="http://yui.yahooapis.com/2.3.0/build/connection/connection-min.js"></script>
</head>
<body >
   <!-- フォーム -->
   <form id="form" enctype="multipart/form-data">
     <input type="file" name="file" />
     <input type="button" onclick="doPost()" value="送信" /><!-- クリックでリクエストを送付 -->
   </form>
   <!-- レスポンスの出力先 -->
   <div id="stdout"></div>
   <script type="text/javascript">
   var doPost = function () {
     
     // fileを持つフォームをコネクションに関連付ける。
     var formObject = document.getElementById('form'); 
     YAHOO.util.Connect.setForm( formObject, true ); // 第2引数をtrueにする。
     
     // コールバック関数を定義したオブジェクト
     var callback = {
         // ファイルアップロード完了後呼ばれる関数。
         upload : function(response) {
             var stdout = document.getElementById("stdout");    
             stdout.innerHTML = response.responseText;
         } 
     };
     
     // リクエストの送付
     var ajax = YAHOO.util.Connect.asyncRequest('POST', "./file.cgi", callback );
   }
   </script>
</body>
</html>

確認はこちらから