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，改进意见等。