SWFUpload

概要

SWFUpload は、JavaScript で出来たファイルアップローダです。
ボタン部分が Flash となっており、その他は JavaScript で動きますので、画面の見せ方は JavaScript でカスタマイズ可能です。
機能としては、複数ファイルの一括アップロード、進捗状況の取得（プログレスバー対応）、アップロードのキャンセル等に対応しており、非常に便利です。

インストール方法

SWFUpload-v2.2.0.1 の例です。

公式サイトからアーカイブ (SWFUpload v2.2.0.1 Core.zip) を取得し、展開します。
個人的にはサンプルがあった方が圧倒的に便利だと思いますので、SWFUpload v2.2.0.1 Samples.zip の方がおすすめです。

 % unzip SWFUpload v2.2.0.1 Samples.zip
 % cd SWFUpload v2.2.0.1 Samples

展開して出来た demo/ ディレクトリ以下にサンプルプログラムがあります。
また、demo/swfupload 以下に SWFUpload のコアとなる JavaScript と Flash ファイルがありますので、使用する際にはこれを使用します。

使用方法

まず、SWFUpload の JavaScript ファイルを読み込みます。

 <script type="text/javascript" src="/js/swfupload.js"></script>

あとはほとんどサンプル通りですが、各種設定値を設定し、SWFUpload のオブジェクトを作成します。
以下、簡単な例です。

 <script type="text/javascript">
  var swfu;
  window.onload = function() {
    var settings = {
      flash_url : "/swf/swfupload.swf",
      upload_url: "upload.pl",
      file_size_limit : "100 MB",
      file_types : "*.*",
      file_types_description : "All Files",
      file_upload_limit : 100,
      file_queue_limit : 0,
 
      custom_settings : {
        progressTarget : "fsUploadProgress",
      },
 
      //debug: true,
 
      // Button settings
      button_image_url: "upload.jpg",
      button_width: "61",
      button_height: "22",
      button_placeholder_id: "spanButtonPlaceHolder",
      button_cursor: SWFUpload.CURSOR.HAND,
 
      //handler
      file_queued_handler : fileQueued,
      file_queue_error_handler : fileQueueError,
      file_dialog_complete_handler : fileDialogComplete,
      upload_start_handler : uploadStart,
      upload_progress_handler : uploadProgress,
      upload_error_handler : uploadError,
      upload_success_handler : uploadSuccess,
      upload_complete_handler : uploadComplete,
      queue_complete_handler : queueComplete
    };
    swfu = new SWFUpload(settings);
  };
 </script>

SWFUpload は各種イベントに対してコールバック関数を設定するような仕掛けになっています。
handler の設定は、それぞれのイベントについて設定しています。
なお、handler の実体は、付属のサンプルについてくる handlers.js 内に記述されていますので、以下のように読み込んでおく必要があります。

 <script type="text/javascript" src="js/handlers.js"></script>

サンプル

アーカイブに含まれているサンプルほぼそのままですが、SWFUpload を使ったサンプルです。
サンプル：SWFUpload