Initial commit
This commit is contained in:
易焱
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* @fileOverview DragAndDrop Widget。
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../lib/dnd',
|
||||
'./widget'
|
||||
], function( Base, Uploader, Dnd ) {
|
||||
var $ = Base.$;
|
||||
|
||||
Uploader.options.dnd = '';
|
||||
|
||||
/**
|
||||
* @property {Selector} [dnd=undefined] 指定Drag And Drop拖拽的容器，如果不指定，则不启动。
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @property {Selector} [disableGlobalDnd=false] 是否禁掉整个页面的拖拽功能，如果不禁用，图片拖进来的时候会默认被浏览器打开。
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event dndAccept
|
||||
* @param {DataTransferItemList} items DataTransferItem
|
||||
* @description 阻止此事件可以拒绝某些类型的文件拖入进来。目前只有 chrome 提供这样的 API，且只能通过 mime-type 验证。
|
||||
* @for Uploader
|
||||
*/
|
||||
return Uploader.register({
|
||||
name: 'dnd',
|
||||
|
||||
init: function( opts ) {
|
||||
|
||||
if ( !opts.dnd ||
|
||||
this.request('predict-runtime-type') !== 'html5' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var me = this,
|
||||
deferred = Base.Deferred(),
|
||||
options = $.extend({}, {
|
||||
disableGlobalDnd: opts.disableGlobalDnd,
|
||||
container: opts.dnd,
|
||||
accept: opts.accept
|
||||
}),
|
||||
dnd;
|
||||
|
||||
this.dnd = dnd = new Dnd( options );
|
||||
|
||||
dnd.once( 'ready', deferred.resolve );
|
||||
dnd.on( 'drop', function( files ) {
|
||||
me.request( 'add-file', [ files ]);
|
||||
});
|
||||
|
||||
// 检测文件是否全部允许添加。
|
||||
dnd.on( 'accept', function( items ) {
|
||||
return me.owner.trigger( 'dndAccept', items );
|
||||
});
|
||||
|
||||
dnd.init();
|
||||
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.dnd && this.dnd.destroy();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* @fileOverview 组件基类。
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../lib/filepaste',
|
||||
'./widget'
|
||||
], function( Base, Uploader, FilePaste ) {
|
||||
var $ = Base.$;
|
||||
|
||||
/**
|
||||
* @property {Selector} [paste=undefined] 指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为`document.body`.
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
*/
|
||||
return Uploader.register({
|
||||
name: 'paste',
|
||||
|
||||
init: function( opts ) {
|
||||
|
||||
if ( !opts.paste ||
|
||||
this.request('predict-runtime-type') !== 'html5' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var me = this,
|
||||
deferred = Base.Deferred(),
|
||||
options = $.extend({}, {
|
||||
container: opts.paste,
|
||||
accept: opts.accept
|
||||
}),
|
||||
paste;
|
||||
|
||||
this.paste = paste = new FilePaste( options );
|
||||
|
||||
paste.once( 'ready', deferred.resolve );
|
||||
paste.on( 'paste', function( files ) {
|
||||
me.owner.request( 'add-file', [ files ]);
|
||||
});
|
||||
paste.init();
|
||||
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.paste && this.paste.destroy();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* @fileOverview 文件选择相关
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../lib/filepicker',
|
||||
'./widget'
|
||||
], function( Base, Uploader, FilePicker ) {
|
||||
var $ = Base.$;
|
||||
|
||||
$.extend( Uploader.options, {
|
||||
|
||||
/**
|
||||
* @property {Selector | Object} [pick=undefined]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 指定选择文件的按钮容器，不指定则不创建按钮。
|
||||
*
|
||||
* * `id` {Seletor|dom} 指定选择文件的按钮容器，不指定则不创建按钮。**注意** 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
|
||||
* * `label` {String} 请采用 `innerHTML` 代替
|
||||
* * `innerHTML` {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
|
||||
* * `multiple` {Boolean} 是否开起同时选择多个文件能力。
|
||||
*/
|
||||
pick: null,
|
||||
|
||||
/**
|
||||
* @property {Arroy} [accept=null]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 指定接受哪些类型的文件。 由于目前还有ext转mimeType表，所以这里需要分开指定。
|
||||
*
|
||||
* * `title` {String} 文字描述
|
||||
* * `extensions` {String} 允许的文件后缀，不带点，多个用逗号分割。
|
||||
* * `mimeTypes` {String} 多个用逗号分割。
|
||||
*
|
||||
* 如：
|
||||
*
|
||||
* ```
|
||||
* {
|
||||
* title: 'Images',
|
||||
* extensions: 'gif,jpg,jpeg,bmp,png',
|
||||
* mimeTypes: 'image/*'
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
accept: null/*{
|
||||
title: 'Images',
|
||||
extensions: 'gif,jpg,jpeg,bmp,png',
|
||||
mimeTypes: 'image/*'
|
||||
}*/
|
||||
});
|
||||
|
||||
return Uploader.register({
|
||||
name: 'picker',
|
||||
|
||||
init: function( opts ) {
|
||||
this.pickers = [];
|
||||
return opts.pick && this.addBtn( opts.pick );
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
$.each( this.pickers, function() {
|
||||
this.refresh();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @method addBtn
|
||||
* @for Uploader
|
||||
* @grammar addBtn( pick ) => Promise
|
||||
* @description
|
||||
* 添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致。
|
||||
* @example
|
||||
* uploader.addBtn({
|
||||
* id: '#btnContainer',
|
||||
* innerHTML: '选择文件'
|
||||
* });
|
||||
*/
|
||||
addBtn: function( pick ) {
|
||||
var me = this,
|
||||
opts = me.options,
|
||||
accept = opts.accept,
|
||||
promises = [];
|
||||
|
||||
if ( !pick ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.isPlainObject( pick ) || (pick = {
|
||||
id: pick
|
||||
});
|
||||
|
||||
$( pick.id ).each(function() {
|
||||
var options, picker, deferred;
|
||||
|
||||
deferred = Base.Deferred();
|
||||
|
||||
options = $.extend({}, pick, {
|
||||
accept: $.isPlainObject( accept ) ? [ accept ] : accept,
|
||||
swf: opts.swf,
|
||||
runtimeOrder: opts.runtimeOrder,
|
||||
id: this
|
||||
});
|
||||
|
||||
picker = new FilePicker( options );
|
||||
|
||||
picker.once( 'ready', deferred.resolve );
|
||||
picker.on( 'select', function( files ) {
|
||||
me.owner.request( 'add-file', [ files ]);
|
||||
});
|
||||
picker.on('dialogopen', function() {
|
||||
me.owner.trigger('dialogOpen', picker.button);
|
||||
});
|
||||
picker.init();
|
||||
|
||||
me.pickers.push( picker );
|
||||
|
||||
promises.push( deferred.promise() );
|
||||
});
|
||||
|
||||
return Base.when.apply( Base, promises );
|
||||
},
|
||||
|
||||
disable: function() {
|
||||
$.each( this.pickers, function() {
|
||||
this.disable();
|
||||
});
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
$.each( this.pickers, function() {
|
||||
this.enable();
|
||||
});
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
$.each( this.pickers, function() {
|
||||
this.destroy();
|
||||
});
|
||||
this.pickers = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,309 @@
|
||||
/**
|
||||
* @fileOverview 图片操作, 负责预览图片和上传前压缩图片
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../lib/image',
|
||||
'./widget'
|
||||
], function( Base, Uploader, Image ) {
|
||||
|
||||
var $ = Base.$,
|
||||
throttle;
|
||||
|
||||
// 根据要处理的文件大小来节流，一次不能处理太多，会卡。
|
||||
throttle = (function( max ) {
|
||||
var occupied = 0,
|
||||
waiting = [],
|
||||
tick = function() {
|
||||
var item;
|
||||
|
||||
while ( waiting.length && occupied < max ) {
|
||||
item = waiting.shift();
|
||||
occupied += item[ 0 ];
|
||||
item[ 1 ]();
|
||||
}
|
||||
};
|
||||
|
||||
return function( emiter, size, cb ) {
|
||||
waiting.push([ size, cb ]);
|
||||
emiter.once( 'destroy', function() {
|
||||
occupied -= size;
|
||||
setTimeout( tick, 1 );
|
||||
});
|
||||
setTimeout( tick, 1 );
|
||||
};
|
||||
})( 5 * 1024 * 1024 );
|
||||
|
||||
$.extend( Uploader.options, {
|
||||
|
||||
/**
|
||||
* @property {Object} [thumb]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 配置生成缩略图的选项。
|
||||
*
|
||||
* 默认为：
|
||||
*
|
||||
* ```javascript
|
||||
* {
|
||||
* width: 110,
|
||||
* height: 110,
|
||||
*
|
||||
* // 图片质量，只有type为`image/jpeg`的时候才有效。
|
||||
* quality: 70,
|
||||
*
|
||||
* // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
|
||||
* allowMagnify: true,
|
||||
*
|
||||
* // 是否允许裁剪。
|
||||
* crop: true,
|
||||
*
|
||||
* // 为空的话则保留原有图片格式。
|
||||
* // 否则强制转换成指定的类型。
|
||||
* type: 'image/jpeg'
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
thumb: {
|
||||
width: 110,
|
||||
height: 110,
|
||||
quality: 70,
|
||||
allowMagnify: true,
|
||||
crop: true,
|
||||
preserveHeaders: false,
|
||||
|
||||
// 为空的话则保留原有图片格式。
|
||||
// 否则强制转换成指定的类型。
|
||||
// IE 8下面 base64 大小不能超过 32K 否则预览失败，而非 jpeg 编码的图片很可
|
||||
// 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
|
||||
type: 'image/jpeg'
|
||||
},
|
||||
|
||||
/**
|
||||
* @property {Object} [compress]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 配置压缩的图片的选项。如果此选项为`false`, 则图片在上传前不进行压缩。
|
||||
*
|
||||
* 默认为：
|
||||
*
|
||||
* ```javascript
|
||||
* {
|
||||
* width: 1600,
|
||||
* height: 1600,
|
||||
*
|
||||
* // 图片质量，只有type为`image/jpeg`的时候才有效。
|
||||
* quality: 90,
|
||||
*
|
||||
* // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
|
||||
* allowMagnify: false,
|
||||
*
|
||||
* // 是否允许裁剪。
|
||||
* crop: false,
|
||||
*
|
||||
* // 是否保留头部meta信息。
|
||||
* preserveHeaders: true,
|
||||
*
|
||||
* // 如果发现压缩后文件大小比原来还大，则使用原来图片
|
||||
* // 此属性可能会影响图片自动纠正功能
|
||||
* noCompressIfLarger: false,
|
||||
*
|
||||
* // 单位字节，如果图片大小小于此值，不会采用压缩。
|
||||
* compressSize: 0
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
compress: {
|
||||
width: 1600,
|
||||
height: 1600,
|
||||
quality: 90,
|
||||
allowMagnify: false,
|
||||
crop: false,
|
||||
preserveHeaders: true
|
||||
}
|
||||
});
|
||||
|
||||
return Uploader.register({
|
||||
|
||||
name: 'image',
|
||||
|
||||
|
||||
/**
|
||||
* 生成缩略图，此过程为异步，所以需要传入`callback`。
|
||||
* 通常情况在图片加入队里后调用此方法来生成预览图以增强交互效果。
|
||||
*
|
||||
* 当 width 或者 height 的值介于 0 - 1 时，被当成百分比使用。
|
||||
*
|
||||
* `callback`中可以接收到两个参数。
|
||||
* * 第一个为error，如果生成缩略图有错误，此error将为真。
|
||||
* * 第二个为ret, 缩略图的Data URL值。
|
||||
*
|
||||
* **注意**
|
||||
* Date URL在IE6/7中不支持，所以不用调用此方法了，直接显示一张暂不支持预览图片好了。
|
||||
* 也可以借助服务端，将 base64 数据传给服务端，生成一个临时文件供预览。
|
||||
*
|
||||
* @method makeThumb
|
||||
* @grammar makeThumb( file, callback ) => undefined
|
||||
* @grammar makeThumb( file, callback, width, height ) => undefined
|
||||
* @for Uploader
|
||||
* @example
|
||||
*
|
||||
* uploader.on( 'fileQueued', function( file ) {
|
||||
* var $li = ...;
|
||||
*
|
||||
* uploader.makeThumb( file, function( error, ret ) {
|
||||
* if ( error ) {
|
||||
* $li.text('预览错误');
|
||||
* } else {
|
||||
* $li.append('<img alt="" src="' + ret + '" />');
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* });
|
||||
*/
|
||||
makeThumb: function( file, cb, width, height ) {
|
||||
var opts, image;
|
||||
|
||||
file = this.request( 'get-file', file );
|
||||
|
||||
// 只预览图片格式。
|
||||
if ( !file.type.match( /^image/ ) ) {
|
||||
cb( true );
|
||||
return;
|
||||
}
|
||||
|
||||
opts = $.extend({}, this.options.thumb );
|
||||
|
||||
// 如果传入的是object.
|
||||
if ( $.isPlainObject( width ) ) {
|
||||
opts = $.extend( opts, width );
|
||||
width = null;
|
||||
}
|
||||
|
||||
width = width || opts.width;
|
||||
height = height || opts.height;
|
||||
|
||||
image = new Image( opts );
|
||||
|
||||
image.once( 'load', function() {
|
||||
file._info = file._info || image.info();
|
||||
file._meta = file._meta || image.meta();
|
||||
|
||||
// 如果 width 的值介于 0 - 1
|
||||
// 说明设置的是百分比。
|
||||
if ( width <= 1 && width > 0 ) {
|
||||
width = file._info.width * width;
|
||||
}
|
||||
|
||||
// 同样的规则应用于 height
|
||||
if ( height <= 1 && height > 0 ) {
|
||||
height = file._info.height * height;
|
||||
}
|
||||
|
||||
image.resize( width, height );
|
||||
});
|
||||
|
||||
// 当 resize 完后
|
||||
image.once( 'complete', function() {
|
||||
cb( false, image.getAsDataUrl( opts.type ) );
|
||||
image.destroy();
|
||||
});
|
||||
|
||||
image.once( 'error', function( reason ) {
|
||||
cb( reason || true );
|
||||
image.destroy();
|
||||
});
|
||||
|
||||
throttle( image, file.source.size, function() {
|
||||
file._info && image.info( file._info );
|
||||
file._meta && image.meta( file._meta );
|
||||
image.loadFromBlob( file.source );
|
||||
});
|
||||
},
|
||||
|
||||
beforeSendFile: function( file ) {
|
||||
var opts = this.options.compress || this.options.resize,
|
||||
compressSize = opts && opts.compressSize || 0,
|
||||
noCompressIfLarger = opts && opts.noCompressIfLarger || false,
|
||||
image, deferred;
|
||||
|
||||
file = this.request( 'get-file', file );
|
||||
|
||||
// 只压缩 jpeg 图片格式。
|
||||
// gif 可能会丢失针
|
||||
// bmp png 基本上尺寸都不大，且压缩比比较小。
|
||||
if ( !opts || !~'image/jpeg,image/jpg'.indexOf( file.type ) ||
|
||||
file.size < compressSize ||
|
||||
file._compressed ) {
|
||||
return;
|
||||
}
|
||||
|
||||
opts = $.extend({}, opts );
|
||||
deferred = Base.Deferred();
|
||||
|
||||
image = new Image( opts );
|
||||
|
||||
deferred.always(function() {
|
||||
image.destroy();
|
||||
image = null;
|
||||
});
|
||||
image.once( 'error', deferred.reject );
|
||||
image.once( 'load', function() {
|
||||
var width = opts.width,
|
||||
height = opts.height;
|
||||
|
||||
file._info = file._info || image.info();
|
||||
file._meta = file._meta || image.meta();
|
||||
|
||||
// 如果 width 的值介于 0 - 1
|
||||
// 说明设置的是百分比。
|
||||
if ( width <= 1 && width > 0 ) {
|
||||
width = file._info.width * width;
|
||||
}
|
||||
|
||||
// 同样的规则应用于 height
|
||||
if ( height <= 1 && height > 0 ) {
|
||||
height = file._info.height * height;
|
||||
}
|
||||
|
||||
image.resize( width, height );
|
||||
});
|
||||
|
||||
image.once( 'complete', function() {
|
||||
var blob, size;
|
||||
|
||||
// 移动端 UC / qq 浏览器的无图模式下
|
||||
// ctx.getImageData 处理大图的时候会报 Exception
|
||||
// INDEX_SIZE_ERR: DOM Exception 1
|
||||
try {
|
||||
blob = image.getAsBlob( opts.type );
|
||||
|
||||
size = file.size;
|
||||
|
||||
// 如果压缩后，比原来还大则不用压缩后的。
|
||||
if ( !noCompressIfLarger || blob.size < size ) {
|
||||
// file.source.destroy && file.source.destroy();
|
||||
file.source = blob;
|
||||
file.size = blob.size;
|
||||
|
||||
file.trigger( 'resize', blob.size, size );
|
||||
}
|
||||
|
||||
// 标记，避免重复压缩。
|
||||
file._compressed = true;
|
||||
deferred.resolve();
|
||||
} catch ( e ) {
|
||||
// 出错了直接继续，让其上传原始图片
|
||||
deferred.resolve();
|
||||
}
|
||||
});
|
||||
|
||||
file._info && image.info( file._info );
|
||||
file._meta && image.meta( file._meta );
|
||||
|
||||
image.loadFromBlob( file.source );
|
||||
return deferred.promise();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* @fileOverview 日志组件，主要用来收集错误信息，可以帮助 webuploader 更好的定位问题和发展。
|
||||
*
|
||||
* 如果您不想要启用此功能，请在打包的时候去掉 log 模块。
|
||||
*
|
||||
* 或者可以在初始化的时候通过 options.disableWidgets 属性禁用。
|
||||
*
|
||||
* 如：
|
||||
* WebUploader.create({
|
||||
* ...
|
||||
*
|
||||
* disableWidgets: 'log',
|
||||
*
|
||||
* ...
|
||||
* })
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'./widget'
|
||||
], function( Base, Uploader ) {
|
||||
var $ = Base.$,
|
||||
logUrl = ' ',
|
||||
product = (location.hostname || location.host || 'protected').toLowerCase(),
|
||||
|
||||
// 只针对 baidu 内部产品用户做统计功能。
|
||||
enable = product && /baidu/i.exec(product),
|
||||
base;
|
||||
|
||||
if (!enable) {
|
||||
return;
|
||||
}
|
||||
|
||||
base = {
|
||||
dv: 3,
|
||||
master: 'webuploader',
|
||||
online: /test/.exec(product) ? 0 : 1,
|
||||
module: '',
|
||||
product: product,
|
||||
type: 0
|
||||
};
|
||||
|
||||
function send(data) {
|
||||
var obj = $.extend({}, base, data),
|
||||
url = logUrl.replace(/^(.*)\?/, '$1' + $.param( obj )),
|
||||
image = new Image();
|
||||
|
||||
image.src = url;
|
||||
}
|
||||
|
||||
return Uploader.register({
|
||||
name: 'log',
|
||||
|
||||
init: function() {
|
||||
var owner = this.owner,
|
||||
count = 0,
|
||||
size = 0;
|
||||
|
||||
owner
|
||||
.on('error', function(code) {
|
||||
send({
|
||||
type: 2,
|
||||
c_error_code: code
|
||||
});
|
||||
})
|
||||
.on('uploadError', function(file, reason) {
|
||||
send({
|
||||
type: 2,
|
||||
c_error_code: 'UPLOAD_ERROR',
|
||||
c_reason: '' + reason
|
||||
});
|
||||
})
|
||||
.on('uploadComplete', function(file) {
|
||||
count++;
|
||||
size += file.size;
|
||||
}).
|
||||
on('uploadFinished', function() {
|
||||
send({
|
||||
c_count: count,
|
||||
c_size: size
|
||||
});
|
||||
count = size = 0;
|
||||
});
|
||||
|
||||
send({
|
||||
c_usage: 1
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
/**
|
||||
* @fileOverview 图片操作, 负责预览图片和上传前压缩图片
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../lib/md5',
|
||||
'../lib/blob',
|
||||
'./widget'
|
||||
], function( Base, Uploader, Md5, Blob ) {
|
||||
|
||||
return Uploader.register({
|
||||
name: 'md5',
|
||||
|
||||
|
||||
/**
|
||||
* 计算文件 md5 值，返回一个 promise 对象，可以监听 progress 进度。
|
||||
*
|
||||
*
|
||||
* @method md5File
|
||||
* @grammar md5File( file[, start[, end]] ) => promise
|
||||
* @for Uploader
|
||||
* @example
|
||||
*
|
||||
* uploader.on( 'fileQueued', function( file ) {
|
||||
* var $li = ...;
|
||||
*
|
||||
* uploader.md5File( file )
|
||||
*
|
||||
* // 及时显示进度
|
||||
* .progress(function(percentage) {
|
||||
* console.log('Percentage:', percentage);
|
||||
* })
|
||||
*
|
||||
* // 完成
|
||||
* .then(function(val) {
|
||||
* console.log('md5 result:', val);
|
||||
* });
|
||||
*
|
||||
* });
|
||||
*/
|
||||
md5File: function( file, start, end ) {
|
||||
var md5 = new Md5(),
|
||||
deferred = Base.Deferred(),
|
||||
blob = (file instanceof Blob) ? file :
|
||||
this.request( 'get-file', file ).source;
|
||||
|
||||
md5.on( 'progress load', function( e ) {
|
||||
e = e || {};
|
||||
deferred.notify( e.total ? e.loaded / e.total : 1 );
|
||||
});
|
||||
|
||||
md5.on( 'complete', function() {
|
||||
deferred.resolve( md5.getResult() );
|
||||
});
|
||||
|
||||
md5.on( 'error', function( reason ) {
|
||||
deferred.reject( reason );
|
||||
});
|
||||
|
||||
if ( arguments.length > 1 ) {
|
||||
start = start || 0;
|
||||
end = end || 0;
|
||||
start < 0 && (start = blob.size + start);
|
||||
end < 0 && (end = blob.size + end);
|
||||
end = Math.min( end, blob.size );
|
||||
blob = blob.slice( start, end );
|
||||
}
|
||||
|
||||
md5.loadFromBlob( blob );
|
||||
|
||||
return deferred.promise();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,309 @@
|
||||
/**
|
||||
* @fileOverview 队列
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../queue',
|
||||
'../file',
|
||||
'../lib/file',
|
||||
'../runtime/client',
|
||||
'./widget'
|
||||
], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
|
||||
|
||||
var $ = Base.$,
|
||||
rExt = /\.\w+$/,
|
||||
Status = WUFile.Status;
|
||||
|
||||
return Uploader.register({
|
||||
name: 'queue',
|
||||
|
||||
init: function( opts ) {
|
||||
var me = this,
|
||||
deferred, len, i, item, arr, accept, runtime;
|
||||
|
||||
if ( $.isPlainObject( opts.accept ) ) {
|
||||
opts.accept = [ opts.accept ];
|
||||
}
|
||||
|
||||
// accept中的中生成匹配正则。
|
||||
if ( opts.accept ) {
|
||||
arr = [];
|
||||
|
||||
for ( i = 0, len = opts.accept.length; i < len; i++ ) {
|
||||
item = opts.accept[ i ].extensions;
|
||||
item && arr.push( item );
|
||||
}
|
||||
|
||||
if ( arr.length ) {
|
||||
accept = '\\.' + arr.join(',')
|
||||
.replace( /,/g, '$|\\.' )
|
||||
.replace( /\*/g, '.*' ) + '$';
|
||||
}
|
||||
|
||||
me.accept = new RegExp( accept, 'i' );
|
||||
}
|
||||
|
||||
me.queue = new Queue();
|
||||
me.stats = me.queue.stats;
|
||||
|
||||
// 如果当前不是html5运行时，那就算了。
|
||||
// 不执行后续操作
|
||||
if ( this.request('predict-runtime-type') !== 'html5' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建一个 html5 运行时的 placeholder
|
||||
// 以至于外部添加原生 File 对象的时候能正确包裹一下供 webuploader 使用。
|
||||
deferred = Base.Deferred();
|
||||
this.placeholder = runtime = new RuntimeClient('Placeholder');
|
||||
runtime.connectRuntime({
|
||||
runtimeOrder: 'html5'
|
||||
}, function() {
|
||||
me._ruid = runtime.getRuid();
|
||||
deferred.resolve();
|
||||
});
|
||||
return deferred.promise();
|
||||
},
|
||||
|
||||
|
||||
// 为了支持外部直接添加一个原生File对象。
|
||||
_wrapFile: function( file ) {
|
||||
if ( !(file instanceof WUFile) ) {
|
||||
|
||||
if ( !(file instanceof File) ) {
|
||||
if ( !this._ruid ) {
|
||||
throw new Error('Can\'t add external files.');
|
||||
}
|
||||
file = new File( this._ruid, file );
|
||||
}
|
||||
|
||||
file = new WUFile( file );
|
||||
}
|
||||
|
||||
return file;
|
||||
},
|
||||
|
||||
// 判断文件是否可以被加入队列
|
||||
acceptFile: function( file ) {
|
||||
var invalid = !file || !file.size || this.accept &&
|
||||
|
||||
// 如果名字中有后缀，才做后缀白名单处理。
|
||||
rExt.exec( file.name ) && !this.accept.test( file.name );
|
||||
|
||||
return !invalid;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @event beforeFileQueued
|
||||
* @param {File} file File对象
|
||||
* @description 当文件被加入队列之前触发，此事件的handler返回值为`false`，则此文件不会被添加进入队列。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event fileQueued
|
||||
* @param {File} file File对象
|
||||
* @description 当文件被加入队列以后触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
_addFile: function( file ) {
|
||||
var me = this;
|
||||
|
||||
file = me._wrapFile( file );
|
||||
|
||||
// 不过类型判断允许不允许，先派送 `beforeFileQueued`
|
||||
if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 类型不匹配，则派送错误事件，并返回。
|
||||
if ( !me.acceptFile( file ) ) {
|
||||
me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
|
||||
return;
|
||||
}
|
||||
|
||||
me.queue.append( file );
|
||||
me.owner.trigger( 'fileQueued', file );
|
||||
return file;
|
||||
},
|
||||
|
||||
getFile: function( fileId ) {
|
||||
return this.queue.getFile( fileId );
|
||||
},
|
||||
|
||||
/**
|
||||
* @event filesQueued
|
||||
* @param {File} files 数组，内容为原始File(lib/File）对象。
|
||||
* @description 当一批文件添加进队列以后触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @property {Boolean} [auto=false]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 设置为 true 后，不需要手动调用上传，有文件选择即开始上传。
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @method addFiles
|
||||
* @grammar addFiles( file ) => undefined
|
||||
* @grammar addFiles( [file1, file2 ...] ) => undefined
|
||||
* @param {Array of File or File} [files] Files 对象 数组
|
||||
* @description 添加文件到队列
|
||||
* @for Uploader
|
||||
*/
|
||||
addFile: function( files ) {
|
||||
var me = this;
|
||||
|
||||
if ( !files.length ) {
|
||||
files = [ files ];
|
||||
}
|
||||
|
||||
files = $.map( files, function( file ) {
|
||||
return me._addFile( file );
|
||||
});
|
||||
|
||||
if ( files.length ) {
|
||||
|
||||
me.owner.trigger( 'filesQueued', files );
|
||||
|
||||
if ( me.options.auto ) {
|
||||
setTimeout(function() {
|
||||
me.request('start-upload');
|
||||
}, 20 );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getStats: function() {
|
||||
return this.stats;
|
||||
},
|
||||
|
||||
/**
|
||||
* @event fileDequeued
|
||||
* @param {File} file File对象
|
||||
* @description 当文件被移除队列后触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @method removeFile
|
||||
* @grammar removeFile( file ) => undefined
|
||||
* @grammar removeFile( id ) => undefined
|
||||
* @grammar removeFile( file, true ) => undefined
|
||||
* @grammar removeFile( id, true ) => undefined
|
||||
* @param {File|id} file File对象或这File对象的id
|
||||
* @description 移除某一文件, 默认只会标记文件状态为已取消，如果第二个参数为 `true` 则会从 queue 中移除。
|
||||
* @for Uploader
|
||||
* @example
|
||||
*
|
||||
* $li.on('click', '.remove-this', function() {
|
||||
* uploader.removeFile( file );
|
||||
* })
|
||||
*/
|
||||
removeFile: function( file, remove ) {
|
||||
var me = this;
|
||||
|
||||
file = file.id ? file : me.queue.getFile( file );
|
||||
|
||||
this.request( 'cancel-file', file );
|
||||
|
||||
if ( remove ) {
|
||||
this.queue.removeFile( file );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @method getFiles
|
||||
* @grammar getFiles() => Array
|
||||
* @grammar getFiles( status1, status2, status... ) => Array
|
||||
* @description 返回指定状态的文件集合，不传参数将返回所有状态的文件。
|
||||
* @for Uploader
|
||||
* @example
|
||||
* console.log( uploader.getFiles() ); // => all files
|
||||
* console.log( uploader.getFiles('error') ) // => all error files.
|
||||
*/
|
||||
getFiles: function() {
|
||||
return this.queue.getFiles.apply( this.queue, arguments );
|
||||
},
|
||||
|
||||
fetchFile: function() {
|
||||
return this.queue.fetch.apply( this.queue, arguments );
|
||||
},
|
||||
|
||||
/**
|
||||
* @method retry
|
||||
* @grammar retry() => undefined
|
||||
* @grammar retry( file ) => undefined
|
||||
* @description 重试上传，重试指定文件，或者从出错的文件开始重新上传。
|
||||
* @for Uploader
|
||||
* @example
|
||||
* function retry() {
|
||||
* uploader.retry();
|
||||
* }
|
||||
*/
|
||||
retry: function( file, noForceStart ) {
|
||||
var me = this,
|
||||
files, i, len;
|
||||
|
||||
if ( file ) {
|
||||
file = file.id ? file : me.queue.getFile( file );
|
||||
file.setStatus( Status.QUEUED );
|
||||
noForceStart || me.request('start-upload');
|
||||
return;
|
||||
}
|
||||
|
||||
files = me.queue.getFiles( Status.ERROR );
|
||||
i = 0;
|
||||
len = files.length;
|
||||
|
||||
for ( ; i < len; i++ ) {
|
||||
file = files[ i ];
|
||||
file.setStatus( Status.QUEUED );
|
||||
}
|
||||
|
||||
me.request('start-upload');
|
||||
},
|
||||
|
||||
/**
|
||||
* @method sort
|
||||
* @grammar sort( fn ) => undefined
|
||||
* @description 排序队列中的文件，在上传之前调整可以控制上传顺序。
|
||||
* @for Uploader
|
||||
*/
|
||||
sortFiles: function() {
|
||||
return this.queue.sort.apply( this.queue, arguments );
|
||||
},
|
||||
|
||||
/**
|
||||
* @event reset
|
||||
* @description 当 uploader 被重置的时候触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @method reset
|
||||
* @grammar reset() => undefined
|
||||
* @description 重置uploader。目前只重置了队列。
|
||||
* @for Uploader
|
||||
* @example
|
||||
* uploader.reset();
|
||||
*/
|
||||
reset: function() {
|
||||
this.owner.trigger('reset');
|
||||
this.queue = new Queue();
|
||||
this.stats = this.queue.stats;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.reset();
|
||||
this.placeholder && this.placeholder.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* @fileOverview 添加获取Runtime相关信息的方法。
|
||||
*/
|
||||
define([
|
||||
'../uploader',
|
||||
'../runtime/runtime',
|
||||
'./widget'
|
||||
], function( Uploader, Runtime ) {
|
||||
|
||||
Uploader.support = function() {
|
||||
return Runtime.hasRuntime.apply( Runtime, arguments );
|
||||
};
|
||||
|
||||
/**
|
||||
* @property {Object} [runtimeOrder=html5,flash]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 指定运行时启动顺序。默认会想尝试 html5 是否支持，如果支持则使用 html5, 否则则使用 flash.
|
||||
*
|
||||
* 可以将此值设置成 `flash`，来强制使用 flash 运行时。
|
||||
*/
|
||||
|
||||
return Uploader.register({
|
||||
name: 'runtime',
|
||||
|
||||
init: function() {
|
||||
if ( !this.predictRuntimeType() ) {
|
||||
throw Error('Runtime Error');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 预测Uploader将采用哪个`Runtime`
|
||||
* @grammar predictRuntimeType() => String
|
||||
* @method predictRuntimeType
|
||||
* @for Uploader
|
||||
*/
|
||||
predictRuntimeType: function() {
|
||||
var orders = this.options.runtimeOrder || Runtime.orders,
|
||||
type = this.type,
|
||||
i, len;
|
||||
|
||||
if ( !type ) {
|
||||
orders = orders.split( /\s*,\s*/g );
|
||||
|
||||
for ( i = 0, len = orders.length; i < len; i++ ) {
|
||||
if ( Runtime.hasRuntime( orders[ i ] ) ) {
|
||||
this.type = type = orders[ i ];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return type;
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,850 @@
|
||||
/**
|
||||
* @fileOverview 负责文件上传相关。
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../file',
|
||||
'../lib/transport',
|
||||
'./widget'
|
||||
], function( Base, Uploader, WUFile, Transport ) {
|
||||
|
||||
var $ = Base.$,
|
||||
isPromise = Base.isPromise,
|
||||
Status = WUFile.Status;
|
||||
|
||||
// 添加默认配置项
|
||||
$.extend( Uploader.options, {
|
||||
|
||||
|
||||
/**
|
||||
* @property {Boolean} [prepareNextFile=false]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 是否允许在文件传输时提前把下一个文件准备好。
|
||||
* 对于一个文件的准备工作比较耗时，比如图片压缩，md5序列化。
|
||||
* 如果能提前在当前文件传输期处理，可以节省总体耗时。
|
||||
*/
|
||||
prepareNextFile: false,
|
||||
|
||||
/**
|
||||
* @property {Boolean} [chunked=false]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 是否要分片处理大文件上传。
|
||||
*/
|
||||
chunked: false,
|
||||
|
||||
/**
|
||||
* @property {Boolean} [chunkSize=5242880]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 如果要分片，分多大一片？ 默认大小为5M.
|
||||
*/
|
||||
chunkSize: 5 * 1024 * 1024,
|
||||
|
||||
/**
|
||||
* @property {Boolean} [chunkRetry=2]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 如果某个分片由于网络问题出错，允许自动重传多少次？
|
||||
*/
|
||||
chunkRetry: 2,
|
||||
|
||||
/**
|
||||
* @property {Boolean} [threads=3]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 上传并发数。允许同时最大上传进程数。
|
||||
*/
|
||||
threads: 3,
|
||||
|
||||
|
||||
/**
|
||||
* @property {Object} [formData={}]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 文件上传请求的参数表，每次发送都会发送此对象中的参数。
|
||||
*/
|
||||
formData: {}
|
||||
|
||||
/**
|
||||
* @property {Object} [fileVal='file']
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 设置文件上传域的name。
|
||||
*/
|
||||
|
||||
/**
|
||||
* @property {Object} [sendAsBinary=false]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 是否已二进制的流的方式发送文件，这样整个上传内容`php://input`都为文件内容，
|
||||
* 其他参数在$_GET数组中。
|
||||
*/
|
||||
});
|
||||
|
||||
// 负责将文件切片。
|
||||
function CuteFile( file, chunkSize ) {
|
||||
var pending = [],
|
||||
blob = file.source,
|
||||
total = blob.size,
|
||||
chunks = chunkSize ? Math.ceil( total / chunkSize ) : 1,
|
||||
start = 0,
|
||||
index = 0,
|
||||
len, api;
|
||||
|
||||
api = {
|
||||
file: file,
|
||||
|
||||
has: function() {
|
||||
return !!pending.length;
|
||||
},
|
||||
|
||||
shift: function() {
|
||||
return pending.shift();
|
||||
},
|
||||
|
||||
unshift: function( block ) {
|
||||
pending.unshift( block );
|
||||
}
|
||||
};
|
||||
|
||||
while ( index < chunks ) {
|
||||
len = Math.min( chunkSize, total - start );
|
||||
|
||||
pending.push({
|
||||
file: file,
|
||||
start: start,
|
||||
end: chunkSize ? (start + len) : total,
|
||||
total: total,
|
||||
chunks: chunks,
|
||||
chunk: index++,
|
||||
cuted: api
|
||||
});
|
||||
start += len;
|
||||
}
|
||||
|
||||
file.blocks = pending.concat();
|
||||
file.remaning = pending.length;
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
Uploader.register({
|
||||
name: 'upload',
|
||||
|
||||
init: function() {
|
||||
var owner = this.owner,
|
||||
me = this;
|
||||
|
||||
this.runing = false;
|
||||
this.progress = false;
|
||||
|
||||
owner
|
||||
.on( 'startUpload', function() {
|
||||
me.progress = true;
|
||||
})
|
||||
.on( 'uploadFinished', function() {
|
||||
me.progress = false;
|
||||
});
|
||||
|
||||
// 记录当前正在传的数据，跟threads相关
|
||||
this.pool = [];
|
||||
|
||||
// 缓存分好片的文件。
|
||||
this.stack = [];
|
||||
|
||||
// 缓存即将上传的文件。
|
||||
this.pending = [];
|
||||
|
||||
// 跟踪还有多少分片在上传中但是没有完成上传。
|
||||
this.remaning = 0;
|
||||
this.__tick = Base.bindFn( this._tick, this );
|
||||
|
||||
// 销毁上传相关的属性。
|
||||
owner.on( 'uploadComplete', function( file ) {
|
||||
|
||||
// 把其他块取消了。
|
||||
file.blocks && $.each( file.blocks, function( _, v ) {
|
||||
v.transport && (v.transport.abort(), v.transport.destroy());
|
||||
delete v.transport;
|
||||
});
|
||||
|
||||
delete file.blocks;
|
||||
delete file.remaning;
|
||||
});
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.request( 'stop-upload', true );
|
||||
this.runing = false;
|
||||
this.pool = [];
|
||||
this.stack = [];
|
||||
this.pending = [];
|
||||
this.remaning = 0;
|
||||
this._trigged = false;
|
||||
this._promise = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* @event startUpload
|
||||
* @description 当开始上传流程时触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* 开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程。
|
||||
*
|
||||
* 可以指定开始某一个文件。
|
||||
* @grammar upload() => undefined
|
||||
* @grammar upload( file | fileId) => undefined
|
||||
* @method upload
|
||||
* @for Uploader
|
||||
*/
|
||||
startUpload: function(file) {
|
||||
var me = this;
|
||||
|
||||
// 移出invalid的文件
|
||||
$.each( me.request( 'get-files', Status.INVALID ), function() {
|
||||
me.request( 'remove-file', this );
|
||||
});
|
||||
|
||||
// 如果指定了开始某个文件，则只开始指定的文件。
|
||||
if ( file ) {
|
||||
file = file.id ? file : me.request( 'get-file', file );
|
||||
|
||||
if (file.getStatus() === Status.INTERRUPT) {
|
||||
file.setStatus( Status.QUEUED );
|
||||
|
||||
$.each( me.pool, function( _, v ) {
|
||||
|
||||
// 之前暂停过。
|
||||
if (v.file !== file) {
|
||||
return;
|
||||
}
|
||||
|
||||
v.transport && v.transport.send();
|
||||
file.setStatus( Status.PROGRESS );
|
||||
});
|
||||
|
||||
|
||||
} else if (file.getStatus() !== Status.PROGRESS) {
|
||||
file.setStatus( Status.QUEUED );
|
||||
}
|
||||
} else {
|
||||
$.each( me.request( 'get-files', [ Status.INITED ] ), function() {
|
||||
this.setStatus( Status.QUEUED );
|
||||
});
|
||||
}
|
||||
|
||||
if ( me.runing ) {
|
||||
me.owner.trigger('startUpload', file);// 开始上传或暂停恢复的，trigger event
|
||||
return Base.nextTick( me.__tick );
|
||||
}
|
||||
|
||||
me.runing = true;
|
||||
var files = [];
|
||||
|
||||
// 如果有暂停的，则续传
|
||||
file || $.each( me.pool, function( _, v ) {
|
||||
var file = v.file;
|
||||
|
||||
if ( file.getStatus() === Status.INTERRUPT ) {
|
||||
me._trigged = false;
|
||||
files.push(file);
|
||||
v.transport && v.transport.send();
|
||||
}
|
||||
});
|
||||
|
||||
$.each(files, function() {
|
||||
this.setStatus( Status.PROGRESS );
|
||||
});
|
||||
|
||||
file || $.each( me.request( 'get-files',
|
||||
Status.INTERRUPT ), function() {
|
||||
this.setStatus( Status.PROGRESS );
|
||||
});
|
||||
|
||||
me._trigged = false;
|
||||
Base.nextTick( me.__tick );
|
||||
me.owner.trigger('startUpload');
|
||||
},
|
||||
|
||||
/**
|
||||
* @event stopUpload
|
||||
* @description 当开始上传流程暂停时触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* 暂停上传。第一个参数为是否中断上传当前正在上传的文件。
|
||||
*
|
||||
* 如果第一个参数是文件，则只暂停指定文件。
|
||||
* @grammar stop() => undefined
|
||||
* @grammar stop( true ) => undefined
|
||||
* @grammar stop( file ) => undefined
|
||||
* @method stop
|
||||
* @for Uploader
|
||||
*/
|
||||
stopUpload: function( file, interrupt ) {
|
||||
var me = this;
|
||||
|
||||
if (file === true) {
|
||||
interrupt = file;
|
||||
file = null;
|
||||
}
|
||||
|
||||
if ( me.runing === false ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果只是暂停某个文件。
|
||||
if ( file ) {
|
||||
file = file.id ? file : me.request( 'get-file', file );
|
||||
|
||||
if ( file.getStatus() !== Status.PROGRESS &&
|
||||
file.getStatus() !== Status.QUEUED ) {
|
||||
return;
|
||||
}
|
||||
|
||||
file.setStatus( Status.INTERRUPT );
|
||||
|
||||
|
||||
$.each( me.pool, function( _, v ) {
|
||||
|
||||
// 只 abort 指定的文件，每一个分片。
|
||||
if (v.file === file) {
|
||||
v.transport && v.transport.abort();
|
||||
|
||||
if (interrupt) {
|
||||
me._putback(v);
|
||||
me._popBlock(v);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
me.owner.trigger('stopUpload', file);// 暂停，trigger event
|
||||
|
||||
return Base.nextTick( me.__tick );
|
||||
}
|
||||
|
||||
me.runing = false;
|
||||
|
||||
// 正在准备中的文件。
|
||||
if (this._promise && this._promise.file) {
|
||||
this._promise.file.setStatus( Status.INTERRUPT );
|
||||
}
|
||||
|
||||
interrupt && $.each( me.pool, function( _, v ) {
|
||||
v.transport && v.transport.abort();
|
||||
v.file.setStatus( Status.INTERRUPT );
|
||||
});
|
||||
|
||||
me.owner.trigger('stopUpload');
|
||||
},
|
||||
|
||||
/**
|
||||
* @method cancelFile
|
||||
* @grammar cancelFile( file ) => undefined
|
||||
* @grammar cancelFile( id ) => undefined
|
||||
* @param {File|id} file File对象或这File对象的id
|
||||
* @description 标记文件状态为已取消, 同时将中断文件传输。
|
||||
* @for Uploader
|
||||
* @example
|
||||
*
|
||||
* $li.on('click', '.remove-this', function() {
|
||||
* uploader.cancelFile( file );
|
||||
* })
|
||||
*/
|
||||
cancelFile: function( file ) {
|
||||
file = file.id ? file : this.request( 'get-file', file );
|
||||
|
||||
// 如果正在上传。
|
||||
file.blocks && $.each( file.blocks, function( _, v ) {
|
||||
var _tr = v.transport;
|
||||
|
||||
if ( _tr ) {
|
||||
_tr.abort();
|
||||
_tr.destroy();
|
||||
delete v.transport;
|
||||
}
|
||||
});
|
||||
|
||||
file.setStatus( Status.CANCELLED );
|
||||
this.owner.trigger( 'fileDequeued', file );
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断`Uplaode`r是否正在上传中。
|
||||
* @grammar isInProgress() => Boolean
|
||||
* @method isInProgress
|
||||
* @for Uploader
|
||||
*/
|
||||
isInProgress: function() {
|
||||
return !!this.progress;
|
||||
},
|
||||
|
||||
_getStats: function() {
|
||||
return this.request('get-stats');
|
||||
},
|
||||
|
||||
/**
|
||||
* 掉过一个文件上传，直接标记指定文件为已上传状态。
|
||||
* @grammar skipFile( file ) => undefined
|
||||
* @method skipFile
|
||||
* @for Uploader
|
||||
*/
|
||||
skipFile: function( file, status ) {
|
||||
file = file.id ? file : this.request( 'get-file', file );
|
||||
|
||||
file.setStatus( status || Status.COMPLETE );
|
||||
file.skipped = true;
|
||||
|
||||
// 如果正在上传。
|
||||
file.blocks && $.each( file.blocks, function( _, v ) {
|
||||
var _tr = v.transport;
|
||||
|
||||
if ( _tr ) {
|
||||
_tr.abort();
|
||||
_tr.destroy();
|
||||
delete v.transport;
|
||||
}
|
||||
});
|
||||
|
||||
this.owner.trigger( 'uploadSkip', file );
|
||||
},
|
||||
|
||||
/**
|
||||
* @event uploadFinished
|
||||
* @description 当所有文件上传结束时触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
_tick: function() {
|
||||
var me = this,
|
||||
opts = me.options,
|
||||
fn, val;
|
||||
|
||||
// 上一个promise还没有结束，则等待完成后再执行。
|
||||
if ( me._promise ) {
|
||||
return me._promise.always( me.__tick );
|
||||
}
|
||||
|
||||
// 还有位置，且还有文件要处理的话。
|
||||
if ( me.pool.length < opts.threads && (val = me._nextBlock()) ) {
|
||||
me._trigged = false;
|
||||
|
||||
fn = function( val ) {
|
||||
me._promise = null;
|
||||
|
||||
// 有可能是reject过来的，所以要检测val的类型。
|
||||
val && val.file && me._startSend( val );
|
||||
Base.nextTick( me.__tick );
|
||||
};
|
||||
|
||||
me._promise = isPromise( val ) ? val.always( fn ) : fn( val );
|
||||
|
||||
// 没有要上传的了，且没有正在传输的了。
|
||||
} else if ( !me.remaning && !me._getStats().numOfQueue &&
|
||||
!me._getStats().numofInterrupt ) {
|
||||
me.runing = false;
|
||||
|
||||
me._trigged || Base.nextTick(function() {
|
||||
me.owner.trigger('uploadFinished');
|
||||
});
|
||||
me._trigged = true;
|
||||
}
|
||||
},
|
||||
|
||||
_putback: function(block) {
|
||||
var idx;
|
||||
|
||||
block.cuted.unshift(block);
|
||||
idx = this.stack.indexOf(block.cuted);
|
||||
|
||||
if (!~idx) {
|
||||
this.stack.unshift(block.cuted);
|
||||
}
|
||||
},
|
||||
|
||||
_getStack: function() {
|
||||
var i = 0,
|
||||
act;
|
||||
|
||||
while ( (act = this.stack[ i++ ]) ) {
|
||||
if ( act.has() && act.file.getStatus() === Status.PROGRESS ) {
|
||||
return act;
|
||||
} else if (!act.has() ||
|
||||
act.file.getStatus() !== Status.PROGRESS &&
|
||||
act.file.getStatus() !== Status.INTERRUPT ) {
|
||||
|
||||
// 把已经处理完了的，或者，状态为非 progress（上传中）、
|
||||
// interupt（暂停中） 的移除。
|
||||
this.stack.splice( --i, 1 );
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
_nextBlock: function() {
|
||||
var me = this,
|
||||
opts = me.options,
|
||||
act, next, done, preparing;
|
||||
|
||||
// 如果当前文件还有没有需要传输的，则直接返回剩下的。
|
||||
if ( (act = this._getStack()) ) {
|
||||
|
||||
// 是否提前准备下一个文件
|
||||
if ( opts.prepareNextFile && !me.pending.length ) {
|
||||
me._prepareNextFile();
|
||||
}
|
||||
|
||||
return act.shift();
|
||||
|
||||
// 否则，如果正在运行，则准备下一个文件，并等待完成后返回下个分片。
|
||||
} else if ( me.runing ) {
|
||||
|
||||
// 如果缓存中有，则直接在缓存中取，没有则去queue中取。
|
||||
if ( !me.pending.length && me._getStats().numOfQueue ) {
|
||||
me._prepareNextFile();
|
||||
}
|
||||
|
||||
next = me.pending.shift();
|
||||
done = function( file ) {
|
||||
if ( !file ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
act = CuteFile( file, opts.chunked ? opts.chunkSize : 0 );
|
||||
me.stack.push(act);
|
||||
return act.shift();
|
||||
};
|
||||
|
||||
// 文件可能还在prepare中，也有可能已经完全准备好了。
|
||||
if ( isPromise( next) ) {
|
||||
preparing = next.file;
|
||||
next = next[ next.pipe ? 'pipe' : 'then' ]( done );
|
||||
next.file = preparing;
|
||||
return next;
|
||||
}
|
||||
|
||||
return done( next );
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @event uploadStart
|
||||
* @param {File} file File对象
|
||||
* @description 某个文件开始上传前触发，一个文件只会触发一次。
|
||||
* @for Uploader
|
||||
*/
|
||||
_prepareNextFile: function() {
|
||||
var me = this,
|
||||
file = me.request('fetch-file'),
|
||||
pending = me.pending,
|
||||
promise;
|
||||
|
||||
if ( file ) {
|
||||
promise = me.request( 'before-send-file', file, function() {
|
||||
|
||||
// 有可能文件被skip掉了。文件被skip掉后，状态坑定不是Queued.
|
||||
if ( file.getStatus() === Status.PROGRESS ||
|
||||
file.getStatus() === Status.INTERRUPT ) {
|
||||
return file;
|
||||
}
|
||||
|
||||
return me._finishFile( file );
|
||||
});
|
||||
|
||||
me.owner.trigger( 'uploadStart', file );
|
||||
file.setStatus( Status.PROGRESS );
|
||||
|
||||
promise.file = file;
|
||||
|
||||
// 如果还在pending中，则替换成文件本身。
|
||||
promise.done(function() {
|
||||
var idx = $.inArray( promise, pending );
|
||||
|
||||
~idx && pending.splice( idx, 1, file );
|
||||
});
|
||||
|
||||
// befeore-send-file的钩子就有错误发生。
|
||||
promise.fail(function( reason ) {
|
||||
file.setStatus( Status.ERROR, reason );
|
||||
me.owner.trigger( 'uploadError', file, reason );
|
||||
me.owner.trigger( 'uploadComplete', file );
|
||||
});
|
||||
|
||||
pending.push( promise );
|
||||
}
|
||||
},
|
||||
|
||||
// 让出位置了，可以让其他分片开始上传
|
||||
_popBlock: function( block ) {
|
||||
var idx = $.inArray( block, this.pool );
|
||||
|
||||
this.pool.splice( idx, 1 );
|
||||
block.file.remaning--;
|
||||
this.remaning--;
|
||||
},
|
||||
|
||||
// 开始上传，可以被掉过。如果promise被reject了，则表示跳过此分片。
|
||||
_startSend: function( block ) {
|
||||
var me = this,
|
||||
file = block.file,
|
||||
promise;
|
||||
|
||||
// 有可能在 before-send-file 的 promise 期间改变了文件状态。
|
||||
// 如：暂停，取消
|
||||
// 我们不能中断 promise, 但是可以在 promise 完后，不做上传操作。
|
||||
if ( file.getStatus() !== Status.PROGRESS ) {
|
||||
|
||||
// 如果是中断，则还需要放回去。
|
||||
if (file.getStatus() === Status.INTERRUPT) {
|
||||
me._putback(block);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
me.pool.push( block );
|
||||
me.remaning++;
|
||||
|
||||
// 如果没有分片，则直接使用原始的。
|
||||
// 不会丢失content-type信息。
|
||||
block.blob = block.chunks === 1 ? file.source :
|
||||
file.source.slice( block.start, block.end );
|
||||
|
||||
// hook, 每个分片发送之前可能要做些异步的事情。
|
||||
promise = me.request( 'before-send', block, function() {
|
||||
|
||||
// 有可能文件已经上传出错了，所以不需要再传输了。
|
||||
if ( file.getStatus() === Status.PROGRESS ) {
|
||||
me._doSend( block );
|
||||
} else {
|
||||
me._popBlock( block );
|
||||
Base.nextTick( me.__tick );
|
||||
}
|
||||
});
|
||||
|
||||
// 如果为fail了，则跳过此分片。
|
||||
promise.fail(function() {
|
||||
if ( file.remaning === 1 ) {
|
||||
me._finishFile( file ).always(function() {
|
||||
block.percentage = 1;
|
||||
me._popBlock( block );
|
||||
me.owner.trigger( 'uploadComplete', file );
|
||||
Base.nextTick( me.__tick );
|
||||
});
|
||||
} else {
|
||||
block.percentage = 1;
|
||||
me.updateFileProgress( file );
|
||||
me._popBlock( block );
|
||||
Base.nextTick( me.__tick );
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* @event uploadBeforeSend
|
||||
* @param {Object} object
|
||||
* @param {Object} data 默认的上传参数，可以扩展此对象来控制上传参数。
|
||||
* @param {Object} headers 可以扩展此对象来控制上传头部。
|
||||
* @description 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event uploadAccept
|
||||
* @param {Object} object
|
||||
* @param {Object} ret 服务端的返回数据，json格式，如果服务端不是json格式，从ret._raw中取数据，自行解析。
|
||||
* @description 当某个文件上传到服务端响应后，会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为`false`, 则此文件将派送`server`类型的`uploadError`事件。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event uploadProgress
|
||||
* @param {File} file File对象
|
||||
* @param {Number} percentage 上传进度
|
||||
* @description 上传过程中触发，携带上传进度。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @event uploadError
|
||||
* @param {File} file File对象
|
||||
* @param {String} reason 出错的code
|
||||
* @description 当文件上传出错时触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event uploadSuccess
|
||||
* @param {File} file File对象
|
||||
* @param {Object} response 服务端返回的数据
|
||||
* @description 当文件上传成功时触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event uploadComplete
|
||||
* @param {File} [file] File对象
|
||||
* @description 不管成功或者失败，文件上传完成时触发。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
// 做上传操作。
|
||||
_doSend: function( block ) {
|
||||
var me = this,
|
||||
owner = me.owner,
|
||||
opts = me.options,
|
||||
file = block.file,
|
||||
tr = new Transport( opts ),
|
||||
data = $.extend({}, opts.formData ),
|
||||
headers = $.extend({}, opts.headers ),
|
||||
requestAccept, ret;
|
||||
|
||||
block.transport = tr;
|
||||
|
||||
tr.on( 'destroy', function() {
|
||||
delete block.transport;
|
||||
me._popBlock( block );
|
||||
Base.nextTick( me.__tick );
|
||||
});
|
||||
|
||||
// 广播上传进度。以文件为单位。
|
||||
tr.on( 'progress', function( percentage ) {
|
||||
block.percentage = percentage;
|
||||
me.updateFileProgress( file );
|
||||
});
|
||||
|
||||
// 用来询问，是否返回的结果是有错误的。
|
||||
requestAccept = function( reject ) {
|
||||
var fn;
|
||||
|
||||
ret = tr.getResponseAsJson() || {};
|
||||
ret._raw = tr.getResponse();
|
||||
fn = function( value ) {
|
||||
reject = value;
|
||||
};
|
||||
|
||||
// 服务端响应了，不代表成功了，询问是否响应正确。
|
||||
if ( !owner.trigger( 'uploadAccept', block, ret, fn ) ) {
|
||||
reject = reject || 'server';
|
||||
}
|
||||
|
||||
return reject;
|
||||
};
|
||||
|
||||
// 尝试重试，然后广播文件上传出错。
|
||||
tr.on( 'error', function( type, flag ) {
|
||||
block.retried = block.retried || 0;
|
||||
|
||||
// 自动重试
|
||||
if ( block.chunks > 1 && ~'http,abort'.indexOf( type ) &&
|
||||
block.retried < opts.chunkRetry ) {
|
||||
|
||||
block.retried++;
|
||||
tr.send();
|
||||
|
||||
} else {
|
||||
|
||||
// http status 500 ~ 600
|
||||
if ( !flag && type === 'server' ) {
|
||||
type = requestAccept( type );
|
||||
}
|
||||
|
||||
file.setStatus( Status.ERROR, type );
|
||||
owner.trigger( 'uploadError', file, type );
|
||||
owner.trigger( 'uploadComplete', file );
|
||||
}
|
||||
});
|
||||
|
||||
// 上传成功
|
||||
tr.on( 'load', function() {
|
||||
var reason;
|
||||
|
||||
// 如果非预期，转向上传出错。
|
||||
if ( (reason = requestAccept()) ) {
|
||||
tr.trigger( 'error', reason, true );
|
||||
return;
|
||||
}
|
||||
|
||||
// 全部上传完成。
|
||||
if ( file.remaning === 1 ) {
|
||||
me._finishFile( file, ret );
|
||||
} else {
|
||||
tr.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
// 配置默认的上传字段。
|
||||
data = $.extend( data, {
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
lastModifiedDate: file.lastModifiedDate,
|
||||
size: file.size
|
||||
});
|
||||
|
||||
block.chunks > 1 && $.extend( data, {
|
||||
chunks: block.chunks,
|
||||
chunk: block.chunk
|
||||
});
|
||||
|
||||
// 在发送之间可以添加字段什么的。。。
|
||||
// 如果默认的字段不够使用，可以通过监听此事件来扩展
|
||||
owner.trigger( 'uploadBeforeSend', block, data, headers );
|
||||
|
||||
// 开始发送。
|
||||
tr.appendBlob( opts.fileVal, block.blob, file.name );
|
||||
tr.append( data );
|
||||
tr.setRequestHeader( headers );
|
||||
tr.send();
|
||||
},
|
||||
|
||||
// 完成上传。
|
||||
_finishFile: function( file, ret, hds ) {
|
||||
var owner = this.owner;
|
||||
|
||||
return owner
|
||||
.request( 'after-send-file', arguments, function() {
|
||||
file.setStatus( Status.COMPLETE );
|
||||
owner.trigger( 'uploadSuccess', file, ret, hds );
|
||||
})
|
||||
.fail(function( reason ) {
|
||||
|
||||
// 如果外部已经标记为invalid什么的，不再改状态。
|
||||
if ( file.getStatus() === Status.PROGRESS ) {
|
||||
file.setStatus( Status.ERROR, reason );
|
||||
}
|
||||
|
||||
owner.trigger( 'uploadError', file, reason );
|
||||
})
|
||||
.always(function() {
|
||||
owner.trigger( 'uploadComplete', file );
|
||||
});
|
||||
},
|
||||
|
||||
updateFileProgress: function(file) {
|
||||
var totalPercent = 0,
|
||||
uploaded = 0;
|
||||
|
||||
if (!file.blocks) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.each( file.blocks, function( _, v ) {
|
||||
uploaded += (v.percentage || 0) * (v.end - v.start);
|
||||
});
|
||||
|
||||
totalPercent = uploaded / file.size;
|
||||
this.owner.trigger( 'uploadProgress', file, totalPercent || 0 );
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,228 @@
|
||||
/**
|
||||
* @fileOverview 各种验证，包括文件总大小是否超出、单文件是否超出和文件是否重复。
|
||||
*/
|
||||
|
||||
define([
|
||||
'../base',
|
||||
'../uploader',
|
||||
'../file',
|
||||
'./widget'
|
||||
], function( Base, Uploader, WUFile ) {
|
||||
|
||||
var $ = Base.$,
|
||||
validators = {},
|
||||
api;
|
||||
|
||||
/**
|
||||
* @event error
|
||||
* @param {String} type 错误类型。
|
||||
* @description 当validate不通过时，会以派送错误事件的形式通知调用者。通过`upload.on('error', handler)`可以捕获到此类错误，目前有以下错误会在特定的情况下派送错来。
|
||||
*
|
||||
* * `Q_EXCEED_NUM_LIMIT` 在设置了`fileNumLimit`且尝试给`uploader`添加的文件数量超出这个值时派送。
|
||||
* * `Q_EXCEED_SIZE_LIMIT` 在设置了`Q_EXCEED_SIZE_LIMIT`且尝试给`uploader`添加的文件总大小超出这个值时派送。
|
||||
* * `Q_TYPE_DENIED` 当文件类型不满足时触发。。
|
||||
* @for Uploader
|
||||
*/
|
||||
|
||||
// 暴露给外面的api
|
||||
api = {
|
||||
|
||||
// 添加验证器
|
||||
addValidator: function( type, cb ) {
|
||||
validators[ type ] = cb;
|
||||
},
|
||||
|
||||
// 移除验证器
|
||||
removeValidator: function( type ) {
|
||||
delete validators[ type ];
|
||||
}
|
||||
};
|
||||
|
||||
// 在Uploader初始化的时候启动Validators的初始化
|
||||
Uploader.register({
|
||||
name: 'validator',
|
||||
|
||||
init: function() {
|
||||
var me = this;
|
||||
Base.nextTick(function() {
|
||||
$.each( validators, function() {
|
||||
this.call( me.owner );
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @property {int} [fileNumLimit=undefined]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 验证文件总数量, 超出则不允许加入队列。
|
||||
*/
|
||||
api.addValidator( 'fileNumLimit', function() {
|
||||
var uploader = this,
|
||||
opts = uploader.options,
|
||||
count = 0,
|
||||
max = parseInt( opts.fileNumLimit, 10 ),
|
||||
flag = true;
|
||||
|
||||
if ( !max ) {
|
||||
return;
|
||||
}
|
||||
|
||||
uploader.on( 'beforeFileQueued', function( file ) {
|
||||
|
||||
if ( count >= max && flag ) {
|
||||
flag = false;
|
||||
this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
|
||||
setTimeout(function() {
|
||||
flag = true;
|
||||
}, 1 );
|
||||
}
|
||||
|
||||
return count >= max ? false : true;
|
||||
});
|
||||
|
||||
uploader.on( 'fileQueued', function() {
|
||||
count++;
|
||||
});
|
||||
|
||||
uploader.on( 'fileDequeued', function() {
|
||||
count--;
|
||||
});
|
||||
|
||||
uploader.on( 'reset', function() {
|
||||
count = 0;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @property {int} [fileSizeLimit=undefined]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 验证文件总大小是否超出限制, 超出则不允许加入队列。
|
||||
*/
|
||||
api.addValidator( 'fileSizeLimit', function() {
|
||||
var uploader = this,
|
||||
opts = uploader.options,
|
||||
count = 0,
|
||||
max = parseInt( opts.fileSizeLimit, 10 ),
|
||||
flag = true;
|
||||
|
||||
if ( !max ) {
|
||||
return;
|
||||
}
|
||||
|
||||
uploader.on( 'beforeFileQueued', function( file ) {
|
||||
var invalid = count + file.size > max;
|
||||
|
||||
if ( invalid && flag ) {
|
||||
flag = false;
|
||||
this.trigger( 'error', 'Q_EXCEED_SIZE_LIMIT', max, file );
|
||||
setTimeout(function() {
|
||||
flag = true;
|
||||
}, 1 );
|
||||
}
|
||||
|
||||
return invalid ? false : true;
|
||||
});
|
||||
|
||||
uploader.on( 'fileQueued', function( file ) {
|
||||
count += file.size;
|
||||
});
|
||||
|
||||
uploader.on( 'fileDequeued', function( file ) {
|
||||
count -= file.size;
|
||||
});
|
||||
|
||||
uploader.on( 'reset', function() {
|
||||
count = 0;
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* @property {int} [fileSingleSizeLimit=undefined]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 验证单个文件大小是否超出限制, 超出则不允许加入队列。
|
||||
*/
|
||||
api.addValidator( 'fileSingleSizeLimit', function() {
|
||||
var uploader = this,
|
||||
opts = uploader.options,
|
||||
max = opts.fileSingleSizeLimit;
|
||||
|
||||
if ( !max ) {
|
||||
return;
|
||||
}
|
||||
|
||||
uploader.on( 'beforeFileQueued', function( file ) {
|
||||
|
||||
if ( file.size > max ) {
|
||||
file.setStatus( WUFile.Status.INVALID, 'exceed_size' );
|
||||
this.trigger( 'error', 'F_EXCEED_SIZE', max, file );
|
||||
return false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @property {Boolean} [duplicate=undefined]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
|
||||
*/
|
||||
api.addValidator( 'duplicate', function() {
|
||||
var uploader = this,
|
||||
opts = uploader.options,
|
||||
mapping = {};
|
||||
|
||||
if ( opts.duplicate ) {
|
||||
return;
|
||||
}
|
||||
|
||||
function hashString( str ) {
|
||||
var hash = 0,
|
||||
i = 0,
|
||||
len = str.length,
|
||||
_char;
|
||||
|
||||
for ( ; i < len; i++ ) {
|
||||
_char = str.charCodeAt( i );
|
||||
hash = _char + (hash << 6) + (hash << 16) - hash;
|
||||
}
|
||||
|
||||
return hash;
|
||||
}
|
||||
|
||||
uploader.on( 'beforeFileQueued', function( file ) {
|
||||
var hash = file.__hash || (file.__hash = hashString( file.name +
|
||||
file.size + file.lastModifiedDate ));
|
||||
|
||||
// 已经重复了
|
||||
if ( mapping[ hash ] ) {
|
||||
this.trigger( 'error', 'F_DUPLICATE', file );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
uploader.on( 'fileQueued', function( file ) {
|
||||
var hash = file.__hash;
|
||||
|
||||
hash && (mapping[ hash ] = true);
|
||||
});
|
||||
|
||||
uploader.on( 'fileDequeued', function( file ) {
|
||||
var hash = file.__hash;
|
||||
|
||||
hash && (delete mapping[ hash ]);
|
||||
});
|
||||
|
||||
uploader.on( 'reset', function() {
|
||||
mapping = {};
|
||||
});
|
||||
});
|
||||
|
||||
return api;
|
||||
});
|
||||
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* @fileOverview 组件基类。
|
||||
*/
|
||||
define([
|
||||
'../base',
|
||||
'../uploader'
|
||||
], function( Base, Uploader ) {
|
||||
|
||||
var $ = Base.$,
|
||||
_init = Uploader.prototype._init,
|
||||
_destroy = Uploader.prototype.destroy,
|
||||
IGNORE = {},
|
||||
widgetClass = [];
|
||||
|
||||
function isArrayLike( obj ) {
|
||||
if ( !obj ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var length = obj.length,
|
||||
type = $.type( obj );
|
||||
|
||||
if ( obj.nodeType === 1 && length ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return type === 'array' || type !== 'function' && type !== 'string' &&
|
||||
(length === 0 || typeof length === 'number' && length > 0 &&
|
||||
(length - 1) in obj);
|
||||
}
|
||||
|
||||
function Widget( uploader ) {
|
||||
this.owner = uploader;
|
||||
this.options = uploader.options;
|
||||
}
|
||||
|
||||
$.extend( Widget.prototype, {
|
||||
|
||||
init: Base.noop,
|
||||
|
||||
// 类Backbone的事件监听声明，监听uploader实例上的事件
|
||||
// widget直接无法监听事件，事件只能通过uploader来传递
|
||||
invoke: function( apiName, args ) {
|
||||
|
||||
/*
|
||||
{
|
||||
'make-thumb': 'makeThumb'
|
||||
}
|
||||
*/
|
||||
var map = this.responseMap;
|
||||
|
||||
// 如果无API响应声明则忽略
|
||||
if ( !map || !(apiName in map) || !(map[ apiName ] in this) ||
|
||||
!$.isFunction( this[ map[ apiName ] ] ) ) {
|
||||
|
||||
return IGNORE;
|
||||
}
|
||||
|
||||
return this[ map[ apiName ] ].apply( this, args );
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 发送命令。当传入`callback`或者`handler`中返回`promise`时。返回一个当所有`handler`中的promise都完成后完成的新`promise`。
|
||||
* @method request
|
||||
* @grammar request( command, args ) => * | Promise
|
||||
* @grammar request( command, args, callback ) => Promise
|
||||
* @for Uploader
|
||||
*/
|
||||
request: function() {
|
||||
return this.owner.request.apply( this.owner, arguments );
|
||||
}
|
||||
});
|
||||
|
||||
// 扩展Uploader.
|
||||
$.extend( Uploader.prototype, {
|
||||
|
||||
/**
|
||||
* @property {String | Array} [disableWidgets=undefined]
|
||||
* @namespace options
|
||||
* @for Uploader
|
||||
* @description 默认所有 Uploader.register 了的 widget 都会被加载，如果禁用某一部分，请通过此 option 指定黑名单。
|
||||
*/
|
||||
|
||||
// 覆写_init用来初始化widgets
|
||||
_init: function() {
|
||||
var me = this,
|
||||
widgets = me._widgets = [],
|
||||
deactives = me.options.disableWidgets || '';
|
||||
|
||||
$.each( widgetClass, function( _, klass ) {
|
||||
(!deactives || !~deactives.indexOf( klass._name )) &&
|
||||
widgets.push( new klass( me ) );
|
||||
});
|
||||
|
||||
return _init.apply( me, arguments );
|
||||
},
|
||||
|
||||
request: function( apiName, args, callback ) {
|
||||
var i = 0,
|
||||
widgets = this._widgets,
|
||||
len = widgets && widgets.length,
|
||||
rlts = [],
|
||||
dfds = [],
|
||||
widget, rlt, promise, key;
|
||||
|
||||
args = isArrayLike( args ) ? args : [ args ];
|
||||
|
||||
for ( ; i < len; i++ ) {
|
||||
widget = widgets[ i ];
|
||||
rlt = widget.invoke( apiName, args );
|
||||
|
||||
if ( rlt !== IGNORE ) {
|
||||
|
||||
// Deferred对象
|
||||
if ( Base.isPromise( rlt ) ) {
|
||||
dfds.push( rlt );
|
||||
} else {
|
||||
rlts.push( rlt );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 如果有callback，则用异步方式。
|
||||
if ( callback || dfds.length ) {
|
||||
promise = Base.when.apply( Base, dfds );
|
||||
key = promise.pipe ? 'pipe' : 'then';
|
||||
|
||||
// 很重要不能删除。删除了会死循环。
|
||||
// 保证执行顺序。让callback总是在下一个 tick 中执行。
|
||||
return promise[ key ](function() {
|
||||
var deferred = Base.Deferred(),
|
||||
args = arguments;
|
||||
|
||||
if ( args.length === 1 ) {
|
||||
args = args[ 0 ];
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
deferred.resolve( args );
|
||||
}, 1 );
|
||||
|
||||
return deferred.promise();
|
||||
})[ callback ? key : 'done' ]( callback || Base.noop );
|
||||
} else {
|
||||
return rlts[ 0 ];
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
_destroy.apply( this, arguments );
|
||||
this._widgets = null;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 添加组件
|
||||
* @grammar Uploader.register(proto);
|
||||
* @grammar Uploader.register(map, proto);
|
||||
* @param {object} responseMap API 名称与函数实现的映射
|
||||
* @param {object} proto 组件原型，构造函数通过 constructor 属性定义
|
||||
* @method Uploader.register
|
||||
* @for Uploader
|
||||
* @example
|
||||
* Uploader.register({
|
||||
* 'make-thumb': 'makeThumb'
|
||||
* }, {
|
||||
* init: function( options ) {},
|
||||
* makeThumb: function() {}
|
||||
* });
|
||||
*
|
||||
* Uploader.register({
|
||||
* 'make-thumb': function() {
|
||||
*
|
||||
* }
|
||||
* });
|
||||
*/
|
||||
Uploader.register = Widget.register = function( responseMap, widgetProto ) {
|
||||
var map = { init: 'init', destroy: 'destroy', name: 'anonymous' },
|
||||
klass;
|
||||
|
||||
if ( arguments.length === 1 ) {
|
||||
widgetProto = responseMap;
|
||||
|
||||
// 自动生成 map 表。
|
||||
$.each(widgetProto, function(key) {
|
||||
if ( key[0] === '_' || key === 'name' ) {
|
||||
key === 'name' && (map.name = widgetProto.name);
|
||||
return;
|
||||
}
|
||||
|
||||
map[key.replace(/[A-Z]/g, '-$&').toLowerCase()] = key;
|
||||
});
|
||||
|
||||
} else {
|
||||
map = $.extend( map, responseMap );
|
||||
}
|
||||
|
||||
widgetProto.responseMap = map;
|
||||
klass = Base.inherits( Widget, widgetProto );
|
||||
klass._name = map.name;
|
||||
widgetClass.push( klass );
|
||||
|
||||
return klass;
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除插件，只有在注册时指定了名字的才能被删除。
|
||||
* @grammar Uploader.unRegister(name);
|
||||
* @param {string} name 组件名字
|
||||
* @method Uploader.unRegister
|
||||
* @for Uploader
|
||||
* @example
|
||||
*
|
||||
* Uploader.register({
|
||||
* name: 'custom',
|
||||
*
|
||||
* 'make-thumb': function() {
|
||||
*
|
||||
* }
|
||||
* });
|
||||
*
|
||||
* Uploader.unRegister('custom');
|
||||
*/
|
||||
Uploader.unRegister = Widget.unRegister = function( name ) {
|
||||
if ( !name || name === 'anonymous' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 删除指定的插件。
|
||||
for ( var i = widgetClass.length; i--; ) {
|
||||
if ( widgetClass[i]._name === name ) {
|
||||
widgetClass.splice(i, 1)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return Widget;
|
||||
});
|
||||
Reference in New Issue
Block a user