Extjs扩展：封装Plupload

关于Plupload

Plupload是一个web文件上传组件，支持通过HTML5、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 += "\nError #" + err.code + ": " + err.message;

  39:                  }

  40:          }

  41:  });

  42:   

  43:  uploader.init();

Plupload的开源协议采用的是GPLv2，同时也提供商业授权。

注意：目前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:  });

现在直接使用pluploadbutton就可以了：

   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:  }

这个例子只要选择了一个文件就开始上传，你可以根据官方的文档做一个Extjs的文件队列，把文件选择到队列中，然后点击上传按钮在统一上传。