PHPでファイルアップロードのプログレスバーを実装するにはに関連して、 Ajax を使ってファイルアップロードを実装してみた。
今までは Ajax 関連は prototype.js を使っていたんだけど、 multipart なデータの post に対応していないので、パッチを当てたりしないと実装できないらしい。
そんな面倒くさいことはしたくないので、ちょっと探していたら YUI(The Yahoo! User Interface Library) は対応しているっぽいのでそれを使ってみた時のメモ。
YUI は何気に cool だ。
別にインストールって程のことでもないんだけど、 YUI - SourceForge から最新版をダウンロードし、展開したら、 yui/build を適当なディレクトリにコピーする。
実装もすこぶる簡単で、まず multipart な form を HTML で作成する。
<head> <script type="text/javascript" src="js/yui/build/yahoo/yahoo.js"></script> <script type="text/javascript" src="js/yui/build/event/event.js"></script> <script type="text/javascript" src="js/yui/build/connection/connection.js"></script> </head> ... <form action="upload.php" method="post" enctype="multipart/form-data" name="upform" id="upform" > <input type="hidden" name="APC_UPLOAD_PROGRESS" value="abcdefg" /> <input type="file" name="upload_file" /> <input type="submit" /> </form>
ここでは form の名前を upform とした。
次に JavaScript の実装。こちらもいたって単純簡単。
var args = ['arg1','arg2', 'arg3'];
var ucb = function(res)
{
alert(res.responseText);
};
var upformCallBack =
{
upload: ucb,
argument: args
};
YAHOO.util.Connect.setForm('upform', true);
YAHOO.util.Connect.asyncRequest('POST', 'upload.php', upformCallBack, 'ajax=1');
setForm 関数で送信したい form 名を指定し、 asyncRequest で upload.php?ajax=1 に送信する。
コールバックとして upformCallBack を指定し、その中で upload handler を指定する感じ。
終了したときは ucb が呼び出される。
簡単でしょ。
Yahoo! UI Library: Connection Manager