百度上传插件WebUploader，angularjs指令封装 - 推酷
百度上传插件WebUploader，angularjs指令封装
1、WebUploader特点
官网地址：
1.1 分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
1.2 预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
1.3 多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
1.4 HTML5 & FLASH
兼容主流浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
1.5 MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
1.6 易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
2、引入资源
2.1 下载包内容
├── Uploader.swf // SWF文件，当使用Flash运行时需要引入。
├── webuploader.js // 完全版本。
├── webuploader.min.js // min版本
├── webuploader.flashonly.js // 只有Flash实现的版本。
├── webuploader.flashonly.min.js // min版本
├── webuploader.html5only.js // 只有Html5实现的版本。
├── webuploader.html5only.min.js // min版本
├── webuploader.withoutimage.js // 去除图片处理的版本，包括HTML5和FLASH.
└── webuploader.withoutimage.min.js // min版本
2.2 或者直接使用由
提供的cdn版本，或者下载
// SWF文件，当使用Flash运行时需要引入。
├── http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf
// 完全版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js
// 只有Flash实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.flashonly.min.js
// 只有Html5实现的版本。
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.js
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.html5only.min.js
// 去除图片处理的版本，包括HTML5和FLASH.
├── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.js
└── http://cdn.staticfile.org/webuploader/0.1.0/webuploader.withoutimage.min.js
2.3 DIY打包
WebUploader文件打包借助了
工具来实现
2.3.1 环境依赖
1.git命令行工具
2.node & npm命令行工具
3.grunt (npm install grunt-cli -g)
2.3.2 编译代码
1.克隆 webuploader git仓库，git clone /fex-team/webuploader.git。
2.安装node依赖，npm install。
3.执行grunt dist，此动作会在dist目录下面创建合并版本的js, 包括通过uglify压缩的min版本。
2.3.3 配置
打开webuploader仓库根目录下面的 Gruntfile.js 文件, 代码合并有 build task来完成。找到 build 配置项。
Gruntfile.js已经配置了一个自定义合并的demo. 打包只支持HTML5的版本
// 自己配置的实例
// glob语法。
cwd: &src&,
'widgets/**/*.js',
'runtime/html5/**/*.js' ],
dest: &dist/webuploader.custom.js&
3、angular指令——&web-uploader&
3.1 指令功能
添加一个上传文件按钮，可以自行配置上传文件的类型和过滤规则，且在弹出的模态框中进行操作，支持连续上传，分类选择上传
3.2 使用说明
这里只是使用说明，可能会加一些注意事项，具体参数或者变量说明请参看后面
3.2.1 页面添加一个指令
&web-uploader class=&btn btn-info& type=&image& accept=&accept&&uploader&/web-uploader&
3.2.2 配置上传类型和过滤规则
type有四种类型，分别为
image：图片
video：音视频
flash：flash
file：办公文档，压缩文件等等
accept有四个对象属性，属性中包含标题、允许文件后缀、允许的mimetype
3.2.3 指令中绑定弹出模态框的事件
web-uploader这个指令中其实只做了一件事，给元素本身绑定弹出模态框的事件，具体上传文件是在模态框中完成的
3.2.4 初始化uploader类，配置相关属性
在模态框控制器中用到了$timeout
$timeout(function(){
//这里是上传配置代码
因为配置uploader时需要事先准备好dom元素，angular打开模态框是异步而JavaScript是单线程，所以实际上在执行模态框控制器中的代码时，模态框并没有打开，也就是dom并没有加载完成，这会导致WebUploader报a.runningtime is not a function...的错误
3.3 指令详细说明
3.3.1 父级controller中的配置
.controller('myCtrl',['$scope', '$modal', function($scope, $modal){
//配置允许上传的类型 图片/音视频/flash/文件
$scope.accept = {
title : 'Images',//标题
extensions : 'gif,jpg,jpeg,bmp,png,ico',//允许上传文件的后缀
mimeTypes : 'image/*'//允许的mimetype
title : 'Videos',
extensions : 'wmv,asf,asx,rm,rmvb,ram,avi,mpg,dat,mp4,mpeg,divx,m4v,mov,qt,flv,f4v,mp3,wav,aac,m4a,wma,ra,3gp,3g2,dv,vob,mkv,ts',
mimeTypes : 'video/*,audio/*'
title : 'Flashs',
extensions : 'swf,fla',
mimeTypes : 'application/x-shockwave-flash'
//办公文档，压缩文件等等
title : 'Files',
extensions : 'zip,rar,ppt,pptx,doc,docx,xls,xlsx,pdf',
mimeTypes : 'application/zip,application/x-rar-compressed,application/vnd.ms-powerpoint,application/vnd.openxmlformats-
officedocument.presentationml.presentation,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-
excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
3.3.2 指令web-uploader
.directive('webUploader', ['$modal', function($modal){
restrict: 'AE',
accept: '=accept'
link: function($scope, $element, $attr){
$element.bind('click',function(){
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'template/webuploader.tpl.html',
size:'lg',
resolve: {
items: function(){
accept: $scope.accept,
type: $attr.type
modalInstance.result.then(function(returnStatus){
console.log(returnStatus);
},function(){
console.log('Modal dismissed at: ' + new Date());
允许的文件类型，此对象是父级controller传到指令中的
四种，分别为 image/video/flash/file 分别代表 图片/音视频/flash/办公文档，压缩文件等等
3.3.3 上传文件模态框
&div class=&modal-header&&
&span&&strong&文件上传&/strong&&/span&
&button type=&button& class=&close& aria-label=&Close& ng-click=&cancel()&&
&span aria-hidden=&true&&&&/span&
&div class=&modal-body&&
&div id=&uploader& class=&wu-example&&
&div class=&queueList&&
&div id=&dndArea& class=&placeholder&&
&div id=&filePicker& class=&webuploader-container&&
&div class=&webuploader-pick&&点击选择图片&/div&
&div id=&rt_rt_19kk0j9rh1onsdor17c73va1u01&
style=&position: top: 0 left: 448 width: 168 height: 44 overflow: bottom: right:&&
&input type=&file& name=&file&
class=&webuploader-element-invisible& multiple=&multiple&
accept=&image/*&&&label
style=&opacity: 0; width: 100%; height: 100%; display: cursor: background-color: rgb(255, 255, 255); background-position: background-repeat:&&&/label&
&p&或将文件拖到这里，单次最多可选30个&/p&
&ul class=&filelist&&&/ul&
&div class=&statusBar& style=&display:&&
&div class=&progress& style=&display:&&
&span class=&text&&0%&/span& &span class=&percentage&
style=&width: 0%;&&&/span&
&div class=&info&&共0张（0B），已上传0张&/div&
&div class=&btns&&
&div id=&filePicker2& class=&webuploader-container&&
&div class=&webuploader-pick&&继续添加&/div&
&div id=&rt_rt_19kk0j9s01k61gq0cks1fsivlv6&
style=&position: top: 0 left: 0 width: 1 height: 1 overflow:&&
&input type=&file& name=&file&
class=&webuploader-element-invisible& multiple=&multiple&
accept=&image/*&&&label
style=&opacity: 0; width: 100%; height: 100%; display: cursor: background-color: rgb(255, 255, 255); background-position: background-repeat:&&&/label&
&div class=&uploadBtn state-pedding&&开始上传&/div&
&div class=&modalCancel& ng-click=&cancel()&&
&span&取消&/span&
3.3.4 模态框控制器
selectType这个对象与指令中的属性type=&&是对应的
例：type=&image&时，模态框中的文字
type=&video&时，模态框中的文字
在模态框控制器中用到了$timeout
$timeout(function(){
//这里是上传配置代码
因为配置uploader时需要事先准备好dom元素，angular打开模态框是异步而JavaScript是单线程，所以实际上在执行模态框控制器中的代码时，模态框并没有打开，也就是dom并没有加载完成，这会导致WebUploader报a.runningtime is not a function...的错误
请看附件中101行，创建uploader实例的代码
当然配置还有很多，请参看webuploader API &：
这里主要操作的是pick.innerHTML和accept
var uploader = WebUploader.create({
//指定选择文件的按钮容器
//multiple是否开启多文件上传，默认为true
id : '#filePicker',
//label : '点击选择图片'
innerHTML: '点击选择' + $scope.selectType[items.type],
multiple: true
//指定拖拽的容器
dnd : '#uploader .queueList',
//启用通过截屏来粘贴图片
paste : document.body,
//指定接受哪些类型的文件
accept : items.accept[items.type],
// swf文件路径
swf : 'Uploader.swf',
disableGlobalDnd : true,
//是否分片
chunked : true,
//chunkSize: 700000,
//每个分片的大小，默认为5M
// server: '/server/fileupload.php',
server : '../demo',
//文件最大数量
fileNumLimit : 30,
//验证文件总大小是否超出限制
fileSizeLimit : 5 * 1024 * 1024, // 200 M
//验证单个文件大小是否超出限制
fileSingleSizeLimit : 1 * 1024 * 1024
（提取码：1abf）
百度WebUploader上传文件插件，grunt版
（提取码：c3ce）
web-uploader指令，写了一个servlet来测试，可直接放在tomcat &webapp下启动tomcat测试，也可以导入eclipse中进行测试
（提取码：8546）
一个小demo，非指令
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致怎么安装angularjs插件 装不了啊 这这怎么玩_百度知道
怎么安装angularjs插件 装不了啊 这这怎么玩
我有更好的答案
后为Google所收购，由Misko Hevery 等人创建，已经被用于Google的多款产品当中、将angularjs所需的.js文件复制到WebContent下 2。是一款优秀的前端JS框架、在网页中使用导入js文件即可 AngularJS 诞生于2009年1
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}