之前项目使用的上传组件是uploadify，H5的是需要收费的，现在H5大行其道，性能也不错不用H5多尴尬，同时还希望手机端PC端通吃。这时候上天让我遇到了美艳的小三Baidu WebFE(FEX)团队开发的Web Uploader，看了一下，用一用，我果断抛弃了我的uploadify正室啊！
简单介绍下Web Uploader：
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规范组织代码，清晰明了，方便高级玩家扩展。
这么多优点，看的我是直流口水，迫不及待的想试试这小三的功力（你是不是也蠢蠢欲动了）。
一共提供了5大类接口，每一类有提供了很多的方法，简直是强大的不要~啊！不要~啊！的。
API和功能相当的丰富，这里我只简单的介绍一下如何初始化和简单配置。
上传入口类。
var uploader = WebUploader.Uploader({
swf: 'path_of_swf/Uploader.swf',
// 开起分片上传。
chunked: true
});
参数说明
dnd{Selector} [可选] [默认值：undefined]指定Drag And Drop拖拽的容器，如果不指定，则不启动。
disableGlobalDnd{Selector} [可选] [默认值：false]是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
paste{Selector} [可选] [默认值：undefined]指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为
document.body.pick{Selector, Object} [可选] [默认值：undefined]指定选择文件的按钮容器，不指定则不创建按钮。
id{Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。label{String} 请采用innerHTML代替innerHTML{String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。multiple{Boolean} 是否开起同时选择多个文件能力。accept{Arroy} [可选] [默认值：null]指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
如：
{ title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }
title{String} 文字描述extensions{String} 允许的文件后缀，不带点，多个用逗号分割。mimeTypes{String} 多个用逗号分割。thumb{Object} [可选]配置生成缩略图的选项。
默认为：
{ width: 110, height: 110, // 图片质量，只有type为`image/jpeg`的时候才有效。 quality: 70, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. allowMagnify: true, // 是否允许裁剪。 crop: true, // 为空的话则保留原有图片格式。 // 否则强制转换成指定的类型。 type: 'image/jpeg' }
compress{Object} [可选]配置压缩的图片的选项。如果此选项为
false, 则图片在上传前不进行压缩。默认为：
{ width: 1600, height: 1600, // 图片质量，只有type为`image/jpeg`的时候才有效。 quality: 90, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. allowMagnify: false, // 是否允许裁剪。 crop: false, // 是否保留头部meta信息。 preserveHeaders: true, // 如果发现压缩后文件大小比原来还大，则使用原来图片 // 此属性可能会影响图片自动纠正功能 noCompressIfLarger: false, // 单位字节，如果图片大小小于此值，不会采用压缩。 compressSize: 0 }
auto{Boolean} [可选] [默认值：false]设置为 true 后，不需要手动调用上传，有文件选择即开始上传。
runtimeOrder{Object} [可选] [默认值：html5,flash]指定运行时启动顺序。默认会想尝试 html5 是否支持，如果支持则使用 html5, 否则则使用 flash.
可以将此值设置成
flash，来强制使用 flash 运行时。prepareNextFile{Boolean} [可选] [默认值：false]是否允许在文件传输时提前把下一个文件准备好。 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。 如果能提前在当前文件传输期处理，可以节省总体耗时。
chunked{Boolean} [可选] [默认值：false]是否要分片处理大文件上传。
chunkSize{Boolean} [可选] [默认值：5242880]如果要分片，分多大一片？ 默认大小为5M.
chunkRetry{Boolean} [可选] [默认值：2]如果某个分片由于网络问题出错，允许自动重传多少次？
threads{Boolean} [可选] [默认值：3]上传并发数。允许同时最大上传进程数。
formData{Object} [可选] [默认值：{}]文件上传请求的参数表，每次发送都会发送此对象中的参数。
fileVal{Object} [可选] [默认值：'file']设置文件上传域的name。
method{Object} [可选] [默认值：'POST']文件上传方式，
POST或者GET。sendAsBinary{Object} [可选] [默认值：false]是否已二进制的流的方式发送文件，这样整个上传内容
php://input都为文件内容， 其他参数在$_GET数组中。fileNumLimit{int} [可选] [默认值：undefined]验证文件总数量, 超出则不允许加入队列。
fileSizeLimit{int} [可选] [默认值：undefined]验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit{int} [可选] [默认值：undefined]验证单个文件大小是否超出限制, 超出则不允许加入队列。
duplicate{Boolean} [可选] [默认值：undefined]去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
disableWidgets{String, Array} [可选] [默认值：undefined]默认所有 Uploader.register 了的 widget 都会被加载，如果禁用某一部分，请通过此 option 指定黑名单。
看一下官方提供的demo
从官方demo可以看出，不但支持选择上传还可以拖动上传，除此之外支持上传前重复，类型，大小校验，失败处理等丰富的交互。我知道你一定也流口水了吧，爱它就试试它吧！
官网：
http://fex-team.github.io/webuploader/
苏公网安备 32050502001014号