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

Extjs扩展:封装Plupload的更多相关文章

  1. jeecg扩展封装tag的那些事

    版权声明:本文为楼主原创文章,未经楼主允许不得转载,如要转载请注明来源. 目前公司开发一直使用的是jeecg框架,简单好用,但有时候不如自己写的随心所欲.最近项目遇到一个需求, 想封装配置加解密,本来 ...

  2. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  3. 学习笔记: Expression表达式目录树详解和扩展封装

    1. 表达式链接扩展封装,ORM常用 And  Or /// <summary> /// 表达式访问者 /// </summary> public class Expressi ...

  4. 基于log4net的日志组件扩展封装,实现自动记录交互日志 XYH.Log4Net.Extend(微服务监控)

    背景: 随着公司的项目不断的完善,功能越来越复杂,服务也越来越多(微服务),公司迫切需要对整个系统的每一个程序的运行情况进行监控,并且能够实现对自动记录不同服务间的程序调用的交互日志,以及通一个服务或 ...

  5. ExtJS扩展:扩展grid

    ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所 ...

  6. 在.NET下学习Extjs(第四个案例 Extjs扩展的原理)

    1.构建如下代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  7. .NetCore 扩展封装 Expression<Func<T, bool>> 查询条件遇到的问题

    前面的文章封装了查询条件 自己去组装条件,但是对 And  Or  这种组合支持很差,但是也不是不能支持,只是要写更多的代码看起来很臃肿 根据 Where(Expression<Func< ...

  8. 【EXCEL终极总结分享】基于NPOI扩展封装的简易操作工具类库(简单灵活易用,支持导出、导入、上传等常见操作)

    对于EXCEL的导入.导出,我之前已分享过多次,比如: 第一种方案:<我写的一个ExcelHelper通用类,可用于读取或生成数据>这个主要是利用把EXCEL当成一个DB来进行获取数据,导 ...

  9. ExtJS扩展:扩展grid之toolbar button禁用表达式

          在前一篇文章我们扩展了grid通过选中记录数来禁用toolbar上的按钮,有时候我们需要通过记录中的数据来决定是否禁用按钮,今天我们就来扩展它.       照例,最新的代码和例子都在gi ...

随机推荐

  1. Android基础学习第三篇—Intent的用法

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  2. 【体系结构】动态调度算法:记分牌算法和tomasulo算法

    记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(I ...

  3. F#之旅0 - 开端

    F#之旅0 - 开端 UWP的学习告一段落,CozyRSS的UWP版本并没有做.UWP跟wpf开发几乎一模一样,然后又引入了很多针对移动设备的东西,这部分有点像android.没啥太大的意思,不难,估 ...

  4. Redis慢链接查看

    设置定义慢日志(小于n微秒的定义为慢日志):CONFIG SET slowlog-log-slower-than n 注:1秒 = 1,000,000微秒设置服务器保存的慢日志最多条数:config ...

  5. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  6. Daily Scrum Meeting ——SecondDay(Beta)12.10

    一.Daily Scrum Meeting照片 二.Burndown Chart 三.项目进展(check-in) 1. 修复两个Alpha版本所遗留的BUG 2. 着手修改参与者与发布者的侧滑框,改 ...

  7. C#版 Winform界面 Socket编程 Client客户端

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  9. Kafka replication

    Kafka replication kafka_replication_detailed_design_v2.pdf kafka Detailed Replication Design V3 Apac ...

  10. NOIP提高模拟题 完全平方数

    完全平方数 (number.***(c/cpp/pas),1000ms,128mb) [问题描述] 一个数如果是另一个整数的完全平方,那么我们就称这个数为完全平方数(Pefect Sqaure),也称 ...