SWFUpload jQuery Plugin

最終更新日時:2010-09-03 16:43:16
jQuery SWFUpload

概要


SWFUpload jQuery Plugin は、SWFUpload を jQuery で使うためのプラグインです。
個人的には、今のところあまり便利という気がしない。。。。。
けど、jQuery をバシバシ使える人には重宝するのかも。

インストール方法


公式サイト?から jquery.swfupload.js ファイルをダウンロードし、使用する場所に設置すればOKです。

使用方法


以下、使用例です。

 <script type="text/javascript" src="/js/swfupload.js"></script>
 <script type="text/javascript" src="/js/jquery.js"></script>
 <script type="text/javascript" src="/js/jquery.swfupload.js"></script>
 <script type="text/javascript">
 
 <script type="text/javascript">
 $(function(){
    $('#swfupload-control').swfupload({
      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,
    })
 
    var swfu = $.swfupload.getInstance('#swfupload-control');
    $('#swfupload-control')
    .bind('fileQueued', function(event, file){
      try {
        var progress = new FileProgress(file, swfu.settings.custom_settings.progressTarget);
        progress.setStatus("Pending...");
        progress.toggleCancel(true, this);
      } catch (ex) {
        $(this).swfupload('debug', 'Upload error - '+ex);
      }
    })
    .bind('fileDialogComplete', function(event, file){
      try {
        $(this).swfupload('startUpload');
      } catch (ex)  {
        $(this).swfupload('debug', ex);
      }
    })
    .bind('uploadStart', function(event, file){
      try {
        var progress = new FileProgress(file, swfu.settings.custom_settings.progressTarget);
        progress.setStatus("Uploading...");
        progress.toggleCancel(true, this);
      }
      catch (ex) {}
      return true;
    })
    ...


上記のように、コールバック関数は、bind で繋げていくことで設定できます。

サンプル


機能はノーマル版そのままですが、SWFUpload jQuery Plugin を使ったサンプルです。
詳細はソースコードをどうぞ(^_^;

サンプル:SWFUpload jQuery版

お問い合わせは 掲示板 にて。