YUI Uplodaer使用例

YUI Uploaderを使う例。ほぼ本家リファレンスの沿った形。
ファイル選択ダイアログでのファイル種類のフィルタリング方法が判りづらかった。

<div id="toBeReplaced" style="width:0px;height:0px"><br />
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. <br />
</div>

<input type="button" value="Open File" onclick="openFile();" />

<!-- スクリプト読み込み。Yahoo!から読み込んでもOK -->
<script type="text/javascript" src="/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/yui/element/element-beta-min.js"></script>
<script type="text/javascript" src="/yui/json/json-min.js"></script>
<script type="text/javascript" src="/yui/uploader/uploader-experimental-min.js"></script>

<script type="text/javascript">
//通常はJSと違う場所にSWFがあるのでSWFのパス指定が必要
YAHOO.widget.Uploader.SWFURL = "/yui/uploader/assets/uploader.swf";

//空のdiv要素をFlashに変える
var uploader = new YAHOO.widget.Uploader("toBeReplaced");

//ファイル選択時に全てアップロードする場合
uploader.addListener("fileSelect", function() {
　//第1引数のアップロードパスは絶対パスか、SWFからの相対パス
　//第3引数のPOSTするデータは、uploadAll()ではそれぞれのアップロードファイルごとに同じ値が送信される
　uploader.uploadAll("/path/to/upload.php", "POST", {param1: "STR", param2: 123});
});

function openFile() {
　//ファイルのフィルタリング。配列の中にハッシュを入れなければいけないので注意！（配列の意味が無い．．．）
　var filter = [{description: "JPEG画像 (*.jpg, *.jpeg)", extensions: "*.jpg;*.jpeg"}];
　uploader.browse(true, filter);
}
</script>

Yahoo!からYUIを読み込む場合は、crossdomain.xmlでアクセスを許可する。

<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="yui.yahooapis.com" />
</cross-domain-policy>

アップロードされたデータの例。
"Upload"というフィールドに"Submit Query"という値が勝手にPOSTされる。

[09-Jun-2008 23:34:15] array (
'Filedata' =>
array (
'name' => 'ファイル名.jpg',
'type' => 'application/octet-stream',
'tmp_name' => '/tmp/path/php23D5.tmp',
'error' => 0,
'size' => 3689,
),
)

[09-Jun-2008 23:34:15] array (
'Filename' => 'ファイル名.jpg',
'param1' => 'STR',
'param2' => '123',
'Upload' => 'Submit Query',
)

参考：
　Yahoo! UI Library: Uploader
　YUI Library Examples: Uploader Control (experimental): Advanced Uploader Example