对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

小渣渣

首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已.

下面先介绍一下WebUploader

简介:

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。

官网地址:http://fex.baidu.com/webuploader/

有兴趣想自己玩的的可以直接移步官网

下面我们开始正文内容:

从上面我们可以看到百度的这个WebUploader功能确实很强大,但是和所有的上传控件一样,使用起来比较繁琐比如下面这样:

你需要先引用一大堆相关的类库,

然后还要写好HTML

登录可见。

这些我们通通不要!,只要两句话,搞定我们的上传.如下:

登录可见。

登录可见。

我已经写好了bootstrap风格的css会自动引用,

支持多文件上传,

自动判别重复文件,

可选自动上传和手动上传,

可以页面中渲染多个上传控件,不冲突

然后一些WebUploader相关的配置参数都是可以直接自己配置的.

下面我们直接上我封装好的JS小插件(有点乱,大家凑合看):

登录可见。

一些相关的比较重要的参数都写了注释,大家自行参考即可.

然后我们来使用他.

登录可见。

写好我们的JS和HTML如下:

登录可见。

这样就OK了,值得注意的是

powerWebUpload中的参数请参考官网的API

GetFilesAddress()方法会返回上传之后文件路径的数组,大家自行获取.
最后上一个我写好的demo,采用Asp.net MVC实现的,大家自行下载:

百度网盘:

链接: http://pan.baidu.com/s/1o8B0xOQ 密码: 9kws


原文：http://www.cnblogs.com/GuZhenYin/p/5584272.html

xiaosen888m

不错！！！！