【jQuery】 アップロード支援プラグイン『Uploadify』

ファイルアップロードできる Uploadify というjQueryプラグインがあったのでメモ。

アップロードの進捗を画面に表示してくれて、しかも複数ファイルを同時にアップロードできる。デモページ を参照。「BROWSE」ボタンとファイル選択の画面にFlashを使っている。

今回試してみたバージョンは uploadify 1.6.2。次のような簡単なソースで、とりあえずシンプルなアップローダーができる(デモにある1個目のサンプル)。

<div>
    <input type="file" id="fileInput" name="fileInput" /><br />
    <a href="javascript:$('#fileInput').fileUploadStart();">Upload Files</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#fileInput').fileUpload({
        'uploader':'_scripts/uploader.swf',
        'script':'_scripts/upload.php',
        'cancelImg':'_scripts/cancel.png',
        'folder':'_uploads'
    });
});
</script>

_scripts ディレクトリに、ダウンロードして解凍した Uploadify のパッケージをそのまま設置した。fileUpload() に引数として渡されているオブジェクトで、いろいろ動作をコントロールできる。

uploader

アップローダのSWF(Flashファイル)のパス

script

アップロード先のPHPスクリプトのパス。

cancelImg

アップロードをキャンセルするボタンのパス

folder

アップロード先のフォルダパス。

それぞれ相対パスで書いてもうまく処理してくれた。folderは、自動的には作ってくれないようなので、手動で作っておく必要がある(受け側PHPの仕様)。

デモページを参考に、いくつかオプションを足してみると動作が変わる。

multi

trueを設定すると、複数選択同時アップロードができるようになる。

auto

trueを設定すると、自動的にアップロードが始まるようになる。

buttonImg

BROWSEボタン画像を別のものに置き換えられるようだ。

width

buttonImgと併せて使う？幅を指定できるんじゃないかしら。

今回テストしたデータはコチラ。

うまいこと PxFW に組み込めたら、PicklesDY とかをちょっと便利にできるかも知れない。ちなみに、適当なオプションを足したり、scriptの後ろに?AAA=BBBとか適当なパラメータを付けてみたりしたが、PHP側で正しく受け取ることはできなかった。(ちょっと改造すればいけるかもだけど)

関連サイト。

• Uploadify のサイト：http://www.uploadify.com/