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的文件队列,把文件选择到队列中,然后点击上传按钮在统一上传。

posted @ 2013-11-07 16:08  tubo  阅读(5049)  评论(2编辑  收藏  举报