主に IT 技術を整理するためにメモ的に書き溜めています。少しだけフリーソフトもあるよ。コメントを残すには、 facebook を使ってください。

Ajax を使ってファイルアップロードするには

最終更新日 2008-02-26 17:24:24 (1年以上前の記事です)

PHPでファイルアップロードのプログレスバーを実装するにはに関連して、 Ajax を使ってファイルアップロードを実装してみた。
今までは Ajax 関連は prototype.js を使っていたんだけど、 multipart なデータの post に対応していないので、パッチを当てたりしないと実装できないらしい。

そんな面倒くさいことはしたくないので、ちょっと探していたら YUI(The Yahoo! User Interface Library) は対応しているっぽいのでそれを使ってみた時のメモ。

YUI は何気に cool だ。

ダウンロードとインストール

別にインストールって程のことでもないんだけど、 YUI - SourceForge から最新版をダウンロードし、展開したら、 yui/build を適当なディレクトリにコピーする。

実装

実装もすこぶる簡単で、まず multipart な form を HTML で作成する。

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 の実装。こちらもいたって単純簡単。

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

最終更新日 2008-02-26 17:24:24

コメント このエントリーをはてなブックマークに追加

フリーソフトウエア
EnjoiFLV
EnjoiPacket
EnjoiCrypto
ランキング
rank1, rank2, rank3, rank7, rank9, rank10, rank11
todo メモ
facebook 対応
ページ処理
RSS feed
検索機能
認証いる?
更新日表示
実はカテゴリ機能
多言語
実はユーザ機能
ソースその内公開
動作環境メモ
php-5.1.6 with PDO
SQLite-3.3
IE6
FireFox-1.5
RSS
非認証

検索
Google