iframeを使った非同期ファイルアップロードの実装
2007年7月29日(日)Ajaxってカテゴリー作って、最初に書くのが微妙に違うような話題。まぁ、広義のAjaxってことで。
Ajax系のシステムでファイルアップロードをする必要があっていろいろググってみたんだけど、あまり私のイメージにぴったりくる解説がないので、実装した結果をちょっとまとめてみました。
題材としては
手順を動作順に分けると
(1) (3)がアップロード結果を出力するiframe を準備
（２）ユーザが入力するフォーム上の
（３）実行されたPHPスクリプトはファイルアップロード処理をしてiframeに出力(print)
(４)iframeのonLoadイベントで、親フォーム（ユーザー入力フォーム）にサムネール(必要ならその他情報)を表示
と大まかに書くとこんな手順。
実際のコード例
※ちょっとだけprototype.js を使用してます(これ無しでは生きられない体になってる)
(1)
< ｉframe name="upload_iframe" style="width:0px;height:0px;">
(２)
・フォーム
< ｆorm action="index.php" method="post" target="upload_iframe" enctype="multipart/form-data">
・ファイルタグ
< ｉnput type="file" onChange="showThumbNail(this);"/>
・スクリプト
function showThumbNail(self){
self.form.submit();
}
(３)iframeへの出力内容
〔$_FILESのエラーチェック処理諸々〕
//正常終了
$wkHTML = < <<__HTML
<ｈtml>
< ｈead>
< ｓcript type="text/javascript">
window.onload = function(){
parent.previewPhoto();
}
< ｂody>
※出力する情報の一例
< ｉnput type="hidden" id="upload_preview" value=サムネールを表示するエレメント名 />
< ｉnput type="hidden" id="upload_rc" value=アップロード結果 />
< ｉnput type="hidden" id="upload_path" value=アップロードしたファイルの保存パス />
__HTML;
print($wkHTML);
＜/ｂody>
＜/ｈtml>
（４）
function previewPhoto(){
if (async_upload_iframe.upload_rc.value == ‘OK’){
$(upload_iframe.upload_preview.value).src = upload_iframe.upload_path.value;
}
}
うーん、やっぱり非同期は処理が分散するから、分かりづらいな．．．
※なんかwordpressでソースコードを表示するやり方がよく分からないのでタグの最初を全角文字にしているのでこのままコピペしても使えません、なんで＜ｐre＞とか＜ｃｏｄｅ＞とか効かないんだろう．．．．
