WebUploader二次封装

spadesUploader

对WebUploader的二次封装,其实是源于之前在一家公司实习的时候发现,做Java后台的上一个人对于后台管理系统的开发,前端基本是能用插件就用插件,能用库就用库,非常的暴力。以致于一开始接手的时候,看了一大堆库的用法。
当然像jQuery,Bootstrap都是必备的。然后就是插件如Boostrap validator jQuery的一堆plugin。后面接触到要开发一个上传的页面,我网上搜了一堆,发现百度的WebUploader还不错,值得一用。但是它的用法实在是有点麻烦,而且多个上传实例还要分别配置。WebUploader源码颇庞大,因为它封装了很多东西以及兼容了很多东西。


简析WebUploader

  • 兼容IE6+ 以及以HTML5为主的上传组件。它支持分片和并发,也就是大文件可以分割多块并发上传。以及能够重传。
  • 支持多种图片格式的预览和压缩。
  • 支持多途径添加文件,比如拖拽,图片粘贴功能
  • 支持了MD5,能够做文件md5值验证。
  • 源码采用AMD规范,也实现AMD模块机制
  • 查看源码其实可以看到分了几个模块组织代码,包括filepicker validator filepaste等都是可以拿出来单独用的。
  • 所有代码都是在一个内部闭包中,对于暴露了唯一一个变量WebUploader,跟jQuery暴露$ 或 jQuery很类似,都是:return require(‘webuploader’),所以说内部是实现了一个简单的AMD模块机制
  • 当然很多修复IE bug的代码,Android和 IOS的代码
  • 同时它也定义了上传过程中的一系列事件像: fileQueued 、 startUpload 、 stopUpload、uploadFinished 等等,WebUploader帮我们定义了这些事件,我们需要在这些事件的回调函数中撰写我们的业务逻辑。
  • 其实这也是封装的一个原因,把事件处理以及UI基本HTML的模板都封装起来了。
  • 最后就是说一下其实WebUploader也实现了Promise规范。可以在WebUploader中创建Deferred对象来处理异步操作,如下:
// 在文件开始发送前做些异步操作。
// WebUploader会等待此异步操作完成后,开始发送文件。
Uploader.register({
    'before-send-file': 'doSomthingAsync'
}, {

    doSomthingAsync: function() {
        var deferred = Base.Deferred();

        // 模拟一次异步操作。
        setTimeout(deferred.resolve, 2000);

        return deferred.promise();
    }
});

言归正传


封装思想:

整个模块也是封装在一个闭包内,对外是不可见的,也就是在一个匿名立即执行函数内,传入jQuery以及WebUploader。
把内部的主要函数createUpload挂载jQuery上,作为jQuery的插件使用。


    $.fn.createUpload=createUpload;

但其实后面,我想在内部也实现一个简单的AMD模块机制,直接把这个createUpload暴露出来,然后就可以直接用这个模块名称创建上传组件对象。
内部实现其实我并不依赖jQuery,如果内部判断到jQuery为null,就会使用AMD的加载方式,否则就用jQuery的插件方式加载。


配置方法

Feature:
- 简化配置多个上传实例
- 封装配置操作
- 提供上传组件的基本UI
- 可以作为jQuery插件使用,导入jQuery即可,但不依赖jQuery
- 提供暴露的class 供配置样式
Usage
请在你的项目目录新建upload文件夹,并把webuploader所有文件
保存到里面 如: upload/webuploader.js upload/Uploader.swf … 的形式
在你的index.html中包含: webuploader.js 、 webuploader.css 以及 simpleSpade.js

下面主要是对这个组件配置的详解:

/****
*Feature:
* 简化配置多个上传实例
* 封装配置操作
* 提供上传组件的基本UI
* 可以作为jQuery插件使用,导入jQuery即可,但不依赖jQuery
* 提供暴露的class 供配置样式
* 暂时提供两种组件样式供选择
* 
* Usage
* 请在你的项目目录新建upload文件夹,并把webuploader所有文件
* 保存到里面 如:
* upload/webuploader.js upload/Uploader.swf ... 的形式
*
* options= {
*     serverPath:'../balight/photo/uploadcode',
*     number: 2,   //创建的上传实例个数
*     type: img,//img or file 上传图片 or  上传普通文件
*     divId:id,  // 你要在页面哪个div下创建这个上传组件
*     fileSizeLimit:,// int  所有文件的总上传大小不超过这个值
*    
*     uploadText:'',
*     thumbnailSize:100, //100 or 200    
*    }

示例代码

引入这些文件后,我们可以在自己的应用index.html或者index.js中使用这个上传组件,非常简单:

//options的部分参数的意义参见WebUploader官方文档,后续会继续更新加入更多可配置的参数,使得组件更灵活易用
    var options={
            serverPath:'../balight/photo/uploadcode',
            number:1,
            type:'file',
            divId:'testupload',
            uploadText:'上传组件示例',
            thumbnailSize:100
        };
        //这种是jQuery引入的方式,所以必须先把jQuery引入工程。
  $.fn.createUpload(optionsx);

源码请戳传送门

Github 上传组件传送门

欢迎提bug,改进意见等。

你可能感兴趣的:(前端,JavaScript)