jQuery.uploadを用いてAjaxファイルアップロード

jQueryベースでのAjaxファイルアップロードを検討していましたが、
結局jQuery.uploadプラグインで実装しました。

ある程度JavaScript＆jQueryを使えるなら、実コードをダウンロードして読むだけでも使えると思います。
それくらい、コードが必要最小限にシンプルで美しい*1。

本家のドキュメントはこちら
これもきちんと纏まってます*2。

以下、実装例*3。
動線は「ファイル選択」→「送信ボタン」です。

ブラウザに表示する送信フォーム

<form action="./#" method="POST" onsubmit="return false;">
<dt>アップロード</dt>
<dd><input type="file" name="file" id="deckfileSelect"></dd>
<dd><input type="button" value="送信" id="deckfileUploadButton"></dd>
</form>

画面表示時に読み込まれるJavascriptコードに追加分

+// file Upload
+var deckUpParams = 'a=deck_add&d=card&n='+loginName;　// サーバサイドScriptに渡すパラメータ
+$('#deckfileUploadButton').click(function() { // 「送信ボタン」のIDを指定
+	$('#deckfileSelect').upload( // 「<input file>」のIDを指定
+		'./card_add.php', // サーバサイドスクリプトのpath
+		deckUpParams,
+		function(res) {
+			$('#deckfileSelect').attr('value', ''); // <input file>のvalueを消去
+			$('#deckUtil').hide(); // アップロード欄を閉じる(掲載ソース外)
+
+			if (res.error!=undefined && res.error) { // エラー時処理
+				alert(res.error);
+				hideOverLay(); // アミカケ表示解除(掲載ソース外)
+				return false;
+			}

(以下、成功時の処理を記載。中略）

+			},
+			'json' // resの形式
+		);
+	});
+

サーバサイドスクリプトでは、

まず通常通り$_FILESで送信ファイル情報、$_POSTでパラメータを受信できるので、それで必要な処理を行ないます。

そして最後に、

echo $response;

で、$response = JOSN形式の文字列　を出力してやれば、
送信元のJavascriptで res = $responseを受信できます。

*1:見習え自分（汗）

*2:見習え自(ry

*3:不要の混乱避けるために、関係ない部分などはしょってます