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を受信できます。
