WebUploader文件上传工具

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主、FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+主流浏览器。两套运行时，采用一致的接口和同样的调用方式，可供用户任意选用，无需关心内部用了什么内核。该平台采用大文件分片与并发结合的方法，将一个大文件分割成多块，并发上传，极大的提高了文件上传效率，同时支持常用图片格式预览与压缩，节省网络数据传输。

软件特性

1、分片、并发

- 分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。

- 当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。

2、预览、压缩

- 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。

- 解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。

3、多途径添加文件

- 支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。

- 粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。

4、HTML5 & FLASH

- 兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。

- 同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。

5、MD5秒传

- 当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。

- 如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。

6、易扩展、可拆分

- 采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。

- 采用AMD规范组织代码，清晰明了，方便高级玩家扩展。

使用教程

1、环境依赖

- git命令行工具

- node & npm命令行工具

- grunt (npm install grunt-cli -g)

2、编译代码

- 克隆 webuploader git仓库，git clone https://github.com/fex-team/webuploader.git。

- 安装node依赖，npm install。

- 执行grunt dist，此动作会在dist目录下面创建合并版本的js, 包括通过uglify压缩的min版本。

3、配置

- 打开webuploader仓库根目录下面的Gruntfile.js文件, 代码合并有buildtask来完成。找到build配置项。

- Gruntfile.js已经配置了一个自定义合并的demo. 打包只支持HTML5的版本。

常见问题

-- 常见 flash 报错原因 --

1、flash 版本太低，请至少大于等于 11.4，低于此版本请提示更新 flash 版本

2、按钮或者他的父级被设置 display:none 隐藏了，在这种情况下 flash 会停止运行，请改用以下方式隐藏，给 需要隐藏的元素加 webuploader-element-invisible 类名代替加 display:none 属性。

-- 应用于移动端注意事项 --

1、webuploader 是满足 ios 6+, android 4+ 的。目前移动端有几个重要的 bug 在此列出来以免大家踩坑。

2、上传请求内容为空，这是 android 4 的一个bug，只要 file 的 blob数据修改过，通过 xhr2 去发送就有这个问题。

2.1、解决方案： 发送的时候采用二进制方案，即 把 sendAsBinary 设置成true, 通过这种方式可以避免这个问题。后端接受需要小改动一下。

3、jpeg 压缩后体积反而变大了，这是 android 的另外一个 bug, canvas.toDataUrl 不支持 jpeg编码，实际上采用的 png 编码。

3.1、解决方案：引入了一个 jpeg js压缩库，在不支持的的情况下采用此库。但是此库默认没有打包进来，需要自行配置打包方案，将 runtime/html5/androidpatch.js 打包进来。

-- 如何判断文件是否上传成功 --

1、默认如果啥也不处理，只要有返回数据就认为是成功，就算返回的是错误信息，也认为是成功了。

2、但是，在认为成功前会派送一个事件uploadAccept，这个事件是用来询问是否上传成功的。在这个事件中你可以拿到上传的是哪个文件，以及对应的服务端返回reponse。