Extjs拡張:パッケージPlupload

19278 ワード

pluplload

Pluploadについて
PluploadはWebファイルアップロードコンポーネントで、HTML 5、Silverlight、Flashまたは普通のformを通じてファイルをアップロードすることをサポートし、ファイルタイプをフィルタリングし、アップロードファイルのサイズを設定し、アップロードの進度を設定し、画像のスケールアップロードの特性を提供し、使用上も非常に簡単である.

   1:  var uploader = new plupload.Uploader({

   2:          runtimes : 'html5,flash,silverlight,html4',

   3:          browse_button : 'pickfiles', // you can pass in id...

   4:          container: document.getElementById('container'), // ... or DOM Element itself

   5:          url : 'upload.php',

   6:          flash_swf_url : '../js/Moxie.swf',

   7:          silverlight_xap_url : '../js/Moxie.xap',

8:

   9:          filters : {

  10:                  max_file_size : '10mb',

  11:                  mime_types: [

  12:                          {title : "Image files", extensions : "jpg,gif,png"},

  13:                          {title : "Zip files", extensions : "zip"}

  14:                  ]

  15:          },

16:

  17:          init: {

  18:                  PostInit: function() {

  19:                          document.getElementById('filelist').innerHTML = '';

20:

  21:                          document.getElementById('uploadfiles').onclick = function() {

  22:                                  uploader.start();

  23:                                  return false;

  24:                          };

  25:                  },

26:

  27:                  FilesAdded: function(up, files) {

  28:                          plupload.each(files, function(file) {

  29:                                  document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';

  30:                          });

  31:                  },

32:

  33:                  UploadProgress: function(up, file) {

  34:                          document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";

  35:                  },

36:

  37:                  Error: function(up, err) {

  38:                          document.getElementById('console').innerHTML += "
Error #" + err.code + ": " + err.message;

  39:                  }

  40:          }

  41:  });

42:

  43:  uploader.init();

PluploadのオープンソースプロトコルはGPLv 2を採用し、ビジネスライセンスも提供している.
注意:現在Pluploadのバージョンは2.0で、公式サイトのドキュメントは古いバージョンで、最新のドキュメントはPluploadのGithubで見てに行きます.
パッケージPlupload
ExtjsでPluploadを定義し、他の場所で使用するのに便利です.

   1:  Ext.define('Ext.ux.Plupload', {

   2:      constructor: function (config) {

   3:          var me = this;

   4:          var cfg = config || {};

   5:          if (!cfg.pluploadConfig) {

   6:              cfg.pluploadConfig = {};

   7:          }

   8:          else {

   9:              var tmp_cfg = cfg.pluploadConfig;

  10:              cfg.pluploadConfig = {};

  11:              Ext.Object.merge(cfg.pluploadConfig, tmp_cfg);

  12:          }

  13:          if (!cfg.pluploadConfig.runtimes) {

  14:              var runtimes = 'html5';

  15:              if (cfg.pluploadConfig.flash_swf_url) {

  16:                  runtimes += ',flash';

  17:              }

  18:              if (cfg.pluploadConfig.silverlight_xap_url) {

  19:                  runtimes += ',silverlight';

  20:              }

  21:              runtimes += ',html4';

  22:              cfg.pluploadConfig.runtimes = runtimes;

  23:          }

  24:          if (!cfg.pluploadConfig.filters) {

  25:              cfg.pluploadConfig.filters = {

  26:                  max_file_size: '10mb'

  27:              }

  28:          }

  29:          else {

  30:              if (!cfg.pluploadConfig.filters.max_file_size) {

  31:                  cfg.pluploadConfig.filters.max_file_size = '10mb';

  32:              }

  33:          }

  34:          cfg.pluploadConfig.browse_button = cfg.browseButton.getEl().dom.id;

  35:          me.uploader = new plupload.Uploader(cfg.pluploadConfig);

  36:          me.uploader.init();

  37:      }

  38:  });

   1:  Ext.create('Ext.ux.Plupload', {

   2:      browseButton: btn,

   3:      pluploadConfig:{ ... }

   4:  });

btnはアップロード動作をバインドするExtjsのButtonであり、pluploadConfigはPluploadの構成パラメータである.
PluploadButtonを拡張
上記の簡単な使用方法では、btnがレンダリングされている必要があります.また、btnがdestroyによってuploaderもdestroyを同時に削除する必要がある場合は、Buttonを拡張します.

   1:  Ext.define('Ext.ux.button.PluploadButton', {

   2:      extend: 'Ext.Button',

   3:      alias: ['widget.pluploadbutton'],

   4:      constructor: function (config) {

   5:          var me = this;

   6:          me.callParent(arguments);

   7:          me.on('render', function (btn, eOpts) {

   8:              btn.uploader = Ext.create('Ext.ux.Plupload', {

   9:                  browseButton: btn,

  10:                  pluploadConfig: eOpts.pluploadConfig

  11:              });

  12:          }, me, { pluploadConfig: config.pluploadConfig });

  13:          me.on('destroy', function (btn, eOpts) {

  14:              if (btn.uploader) {

  15:                  btn.uploader.uploader.destroy();

  16:              }

  17:          })

  18:      }

  19:  });

   1:  {

   2:      xtype: 'pluploadbutton',

   3:      text: '    ',

   4:      pluploadConfig: {

   5:          url: '/Images/Upload',

   6:          flash_swf_url: '/Scripts/plupload/js/Moxie.swf',

   7:          filters: {

   8:              mime_types: [

   9:                  {

  10:                      title: "    ",

  11:                      extensions: "jpg,gif,png"

  12:                  }

  13:              ]

  14:          },

  15:          init: {

  16:              QueueChanged: function (up) {

  17:                //

  18:                  up.start();

  19:              },

  20:              FileUploaded: function (up, files, response) {

  21:                  var json = Ext.JSON.decode(response.response);

  22:                 .........

23:

  24:              }

  25:          }

  26:      }

  27:  }

この例では、1つのファイルを選択するだけでアップロードを開始し、公式のドキュメントに基づいてExtjsのファイルキューを作成し、ファイルをキューに選択し、アップロードボタンをクリックして統一的にアップロードすることができます.

WebViewとJavaScriptのインタラクション

AgentWeb-Android-H 5ハイブリッド開発