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

最終更新日 2008-02-26 17:24:24 （１年以上前の記事です）

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

English

このブログについて
比較的どうでも良い事
ブログを書くにあたって
クッキーポリシー

フリーソフトウエア
EnjoiFLV
EnjoiPacket
EnjoiCrypto

ランキング
rank2, rank3, rank7, rank10, rank11

todo メモ
facebook 対応
ページ処理
RSS feed
検索機能
認証いる？
更新日表示
実はカテゴリ機能
多言語
実はユーザ機能
ソースその内公開

動作環境メモ
php-5.1.6 with PDO
SQLite-3.3
IE6
FireFox-1.5

RSS