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帮我们定义了这些事件,我们需要在这些事件的回调函数中撰写我们的业务逻辑。
- 其实这也是封装的一个原因,把事件处理以及U