The YUI Team just released version 2.5.0 of the library. We’ve added six new components ? Layout Manager, Uploader (multi-file upload engine combining Flash and JavaScript), Resize Utility, ImageCropper, Cookie Utility and a ProfilerViewer Control that works in tandem with the YUI Profiler.

2/20にYUI2.5.0がリリースされ、多数の機能強化が行われました。
新機能である、Flickr風ファイルアップローダは、複数ファイルのアップロードが可能、かつファイルのアップロードの進捗表示が可能な高機能アップローダです。

これをPHPで実装してみましたので、その実装方法とPHPのバックエンドプログラムを紹介。



(1) HTMLソースの入手
YUI Library : Uploader Control の Advanced Uploader Example にてアップロード用のhtmlが配布されているので入手。
htmlからのJSのincludeには、yahoo!のサーバが使われているため、htmlのみアップロードして、そのまますぐ使えるようになっています。

(2) upload.swf の設置
ただし、Flash のアップロードスクリプトである、uploader.swf はFlashプレイヤーのセキュリティの関係上、ダウンロードして html と同じディレクトリに置く必要があります。
同じディレクトリに設置するに伴い、htmlのjsコードを次のように修正。

YAHOO.widget.Uploader.SWFURL = "http://yui.yahooapis.com/2.5.0/build/uploader/assets/uploader.swf";
↓
YAHOO.widget.Uploader.SWFURL = "uploader.swf";

(3) PHPバックエンドの設置
そして、PHPでバックエンドのプログラムを簡単に書いてみたので紹介。
データは次の形式で来ます。(以下は print_r($_FILES) をやった結果です)

Array
(
    [Filedata] => Array
        (
            [name] => title.jpg
            [type] => application/octet-stream
            [tmp_name] => /tmp/phpo9K9S7
            [error] => 0
            [size] => 7955
        )
)

なので、次のようにプログラムを書いてアップロード処理するだけです。
save.php などとして保存。

<?php

$filedata = $_FILES["Filedata"];
move_uploaded_file($filedata["tmp_name"], "save/".$filedata["name"]);

?>

(4) ファイル送信先の指定
HTML内のJSからファイルの送信先を指定します。

uploader.upload(idToUpload, 'YOUR UPLOAD URL GOES HERE');
// YOUR UPLOAD URL GOES HERE 部分にアップロード先 save.php を指定します。

現在のファイル一覧は次のような感じ。

./uploader-advanced_source.html (ダウンロードしたhtmlファイル。uploader.swfの書き換えとファイル送信先定義済み)
./uploader.swf (ここから入手)
./save.php
./save/ (ファイルを保存するディレクトリ。UNIXの場合パーミッションは777など書き込み権限を与える)

(5) ファイルを送信してみよう
uploader-advanced_source.html にアクセスして「Browse for Image」ボタン押下。
複数ファイルの選択も可能なダイアログが表示されるのでアップロードするファイルを選択。

ファイルを選択すると、ファイル名、サイズ、アップロード進捗メーターが表示されます。



「Upload Selected」ボタンでファイルアップロードの実行。
進捗メーターがずいずい進んでファイルのアップロードが完了します。