about-us.css
animate.css
bootstrap-fileupload.css
bootstrap-modal.css
bootstrap-responsive.min.css
bootstrap-responsive1.min.css
bootstrap-tag.css
bootstrap-toggle-buttons.css
bootstrap-tree.css
bootstrap-wysihtml5.css
bootstrap.min.css
chosen.css
clockface.css
colorpicker.css
coming-soon.css
datepicker.css
daterangepicker.css
datetimepicker.css
default.css
dropzone.css
DT_bootstrap.css
font-awesome.css
font-awesome.min.css
fullcalendar.css
glyphicons.css
halflings.css
invoice.css
jquery-ui-1.10.1.custom.min.css
jquery.easy-pie-chart.css
jquery.fancybox.css
jquery.fileupload-ui.css
jquery.gritter.css
jquery.nestable.css
jquery.tagsinput.css
jquery.ui.slider.css
jqvmap.css
login-soft.css
multi-select-metro.css
pricing-tables.css
profile.css
purple.css
search.css
select2_metro.css
style-metro.css
style-non-responsive.css
style-responsive.css
timeline.css
timepicker.css
uniform.default.css
animated-overlay.gif
avatar.png
bg-input-focus.png
bg-input.png
bstree-halflings.png
chosen-sprite.png
datatable-row-openclose.png
fancybox_loading.gif
fancybox_overlay.png
fancybox_sprite.png
fontawesome-webfont.eot
fontawesome-webfont.ttf
fontawesome-webfont.woff
glyphicons-halflings-white.png
glyphicons-halflings.png
glyphicons-regular.eot
glyphicons-regular.ttf
glyphicons-regular.woff
glyphicons-white.png
glyphicons.png
glyphiconshalflings-regular.eot
glyphiconshalflings-regular.ttf
glyphiconshalflings-regular.woff
glyphicons_halflings-white.png
glyphicons_halflings.png
hor-menu-search-close-white.png
hor-menu-search-close.png
hor-menu-search.png
icon-color-close.png
icon-color.png
ie-spacer.gif
loading.gif
logo-big.png
menu-toggler.png
overlay-icon.png
portlet-collapse-icon-white.png
portlet-collapse-icon.png
portlet-config-icon-white.png
portlet-config-icon.png
portlet-expand-icon-white.png
portlet-expand-icon.png
portlet-reload-icon-white.png
portlet-reload-icon.png
portlet-remove-icon-white.png
portlet-remove-icon.png
remove-icon-small.png
saturation.png
search-icon.png
select2-spinner.gif
select2.png
select2x2.png
sidebar-menu-arrow.png
sidebar-search-close.png
sidebar-toggler.jpg
sort_asc.png
sort_both.png
sort_desc.png
sprite.png
switch.png
syncfusion-icons-white.png
syncfusion-icons.png
ui-bg_flat_10_x100.png
ui-bg_glass_100_f6f6f6_1x400.png
ui-bg_glass_100_fdf5ce_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_highlight-soft_100_eeeeee_1x100.png
ui-bg_highlight-soft_75_ffe45c_1x100.png
ui-icons_x240.png
ui-icons_x240.png
ui-icons_ffffff_256x240.png
bootstrap-rtl.min.js
excanvas.js
jquery-1.8.3.min.js
respond.js
SEAWEBSITE_.sql
backgroundsize.min.htc
dark-bl.svg
dark-br.svg
dark-tl.svg
dark-tr.svg
light-bl.svg
light-br.svg
light-tl.svg
light-tr.svg
overlay.png
style-mobile.css
style-narrow.css
style-narrower.css
style-normal.css
style-noscript.css
style-wide.css
anchor.html
attachment
fileTypeImages
icon_chm.gif
icon_default.png
icon_doc.gif
icon_exe.gif
icon_jpg.gif
icon_mp3.gif
icon_mv.gif
icon_pdf.gif
icon_ppt.gif
icon_psd.gif
icon_rar.gif
icon_txt.gif
icon_xls.gif
alignicon.gif
alignicon.png
file-icons.gif
file-icons.png
progress.png
success.gif
success.png
attachment.css
attachment.html
background
success.png
background.css
background.html
charts0.png
charts1.png
charts2.png
charts3.png
charts4.png
charts5.png
charts.css
charts.html
jxface2.gif
neweditor-tab-bg.png
emotion.css
emotion.html
alignicon.jpg
progress.png
success.gif
success.png
image.html
insertframe
insertframe.html
music.html
preview.html
addimg.png
delimg.png
delimgH.png
emptyH.png
eraser.png
scaleH.png
scrawl.css
scrawl.html
searchreplace
searchreplace.html
snapscreen
snapscreen.html
spechars.html
dragicon.png
edittable.css
edittable.html
edittd.html
edittip.html
template.css
template.html
center_focus.jpg
file-icons.gif
file-icons.png
left_focus.jpg
none_focus.jpg
progress.png
right_focus.jpg
success.gif
success.png
video.html
webapp.html
fClipboard_ueditor.swf
imageUploader.swf
wordimage.html
addimage.png
alldeletebtnhoverskin.png
alldeletebtnupskin.png
background.png
button.png
deletedisable.png
deleteenable.png
listbackground.png
localimage.png
rotateleftdisable.png
rotateleftenable.png
rotaterightdisable.png
rotaterightenable.png
upload.png
localimage.png
upload.png
config.json
ueditor.css
ueditor.min.css
anchor.gif
arrow_down.png
arrow_up.png
button-bg.gif
cancelbutton.gif
charts.png
cursor_h.gif
cursor_h.png
cursor_v.gif
cursor_v.png
dialog-title-bg.png
filescan.png
highlighted.gif
icons-all.gif
loaderror.png
loading.gif
neweditor-tab-bg.png
pagebreak.gif
sortable.png
spacer.gif
sparator_v.png
table-cell-align.png
tangram-colorpicker.png
toolbar_bg.png
unhighlighted.gif
upload.png
videologo.gif
wordpaste.png
dialogbase.css
iframe.css
third-party
codemirror
codemirror.css
highcharts
snapscreen
UEditorSnapscreen.exe
SyntaxHighlighter
shCoreDefault.css
video-js.css
video-js.min.css
video-js.swf
webuploader
Uploader.swf
webuploader.css
zeroclipboard
ZeroClipboard.swf
jquery-1.10.2.min.map
pic_10.jpg
pic_11.jpg
pic_12.jpg
pic_13.jpg
pic_14.jpg
pic_15.jpg
pic_16.jpg
pic_17.jpg
pic_18.jpg
pic_19.jpg
pic_20.jpg
banner.jpg
userprofile
robots.txt
使用说明.txt
/*! WebUploader 0.1.2 */
* @fileOverview 让内部各个部件的代码可以用[amd](/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来??
* AMD API 内部的简单不完全实现，请忽略。只有当WebUploader被合并成一个文件的时候才会引入??
(function( root, factory ) {
var modules = {},
// 内部require, 简单不完全实现??
// /amdjs/amdjs-api/wiki/require
_require = function( deps, callback ) {
var args, len,
// 如果deps不是数组，则直接返回指定module
if ( typeof deps === 'string' ) {
return getModule( deps );
args = [];
for( len = deps.length, i = 0; i & i++ ) {
args.push( getModule( deps[ i ] ) );
return callback.apply( null, args );
// 内部define，暂时不支持不指定id.
_define = function( id, deps, factory ) {
if ( arguments.length === 2 ) {
_require( deps || [], function() {
setModule( id, factory, arguments );
// 设置module, 兼容CommonJs写法??
setModule = function( id, factory, args ) {
var module = {
exports: factory
if ( typeof factory === 'function' ) {
args.length || (args = [ _require, module.exports, module ]);
returned = factory.apply( null, args );
returned !== undefined && (module.exports = returned);
modules[ id ] = module.
// 根据id获取module
getModule = function( id ) {
var module = modules[ id ] || root[ id ];
if ( !module ) {
throw new Error( '`' + id + '` is undefined' );
// 将所有modules，将路径ids装换成对象??
exportsTo = function( obj ) {
var key, host, parts, part, last, ucF
// make the first character upper case.
ucFirst = function( str ) {
return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
for ( key in modules ) {
if ( !modules.hasOwnProperty( key ) ) {
parts = key.split('/');
last = ucFirst( parts.pop() );
while( (part = ucFirst( parts.shift() )) ) {
host[ part ] = host[ part ] || {};
host = host[ part ];
host[ last ] = modules[ key ];
exports = factory( root, _define, _require ),
// exports every module.
exportsTo( exports );
if ( typeof module === 'object' && typeof module.exports === 'object' ) {
// For CommonJS and CommonJS-like environments where a proper window is present,
module.exports =
} else if ( typeof define === 'function' && define.amd ) {
// Allow using this built library as an AMD module
// in another project. That other project will only
// see this AMD call, not the internal modules in
// the closure below.
define([], exports );
// Browser globals case. Just assign the
// result to a property on the global.
origin = root.WebU
root.WebUploader =
root.WebUploader.noConflict = function() {
root.WebUploader =
})( this, function( window, define, require ) {
* @fileOverview jQuery or Zepto
define('dollar-third',[],function() {
return window.jQuery || window.Z
* @fileOverview Dom 操作相关
define('dollar',[
'dollar-third'
], function( _ ) {
* @fileOverview 使用jQuery的Promise
define('promise-third',[
'dollar'
], function( $ ) {
Deferred: $.Deferred,
when: $.when,
isPromise: function( anything ) {
return anything && typeof anything.then === 'function';
* @fileOverview Promise/A+
define('promise',[
'promise-third'
], function( _ ) {
* @fileOverview 基础类方法??
* Web Uploader内部类的详细说明，以下提及的功能类，都可以在`WebUploader`这个变量中访问到??
* As you know, Web Uploader的每个文件都是用过[AMD](/amdjs/amdjs-api/wiki/AMD)规范中的`define`组织起来?? 每个Module都会有个module id.
* 默认module id该文件的路径，而此路径将会转化成名字空间存放在WebUploader中。如??
* * module `base`：WebUploader.Base
* * module `file`: WebUploader.File
* * module `lib/dnd`: WebUploader.Lib.Dnd
* * module `runtime/html5/dnd`: WebUploader.Runtime.Html5.Dnd
* 以下文档将可能省略`WebUploader`前缀??
* @module WebUploader
* @title WebUploader API文档
define('base',[
'dollar',
'promise'
], function( $, promise ) {
var noop = function() {},
call = Function.
// /uncurrythis
// 反科里化
function uncurryThis( fn ) {
return function() {
return call.apply( fn, arguments );
function bindFn( fn, context ) {
return function() {
return fn.apply( context, arguments );
function createObject( proto ) {
if ( Object.create ) {
return Object.create( proto );
f = function() {};
f.prototype =
return new f();
* 基础类，提供一些简单常用的方法??
* @class Base
* @property {String} version 当前版本号??
version: '0.1.2',
* @property {jQuery|Zepto} $ 引用依赖的jQuery或者Zepto对象??
Deferred: promise.Deferred,
isPromise: promise.isPromise,
when: promise.when,
* @description
简单的浏览器检查结果??
* * `webkit`
webkit版本号，如果浏览器为非webkit内核，此属性为`undefined`??
* * `chrome`
chrome浏览器版本号，如果浏览器为chrome，此属性为`undefined`??
ie浏览器版本号，如果浏览器为非ie，此属性为`undefined`??*暂不支持ie10+**
* * `firefox`
firefox浏览器版本号，如果浏览器为非firefox，此属性为`undefined`??
* * `safari`
safari浏览器版本号，如果浏览器为非safari，此属性为`undefined`??
* * `opera`
opera浏览器版本号，如果浏览器为非opera，此属性为`undefined`??
* @property {Object} [browser]
browser: (function( ua ) {
var ret = {},
webkit = ua.match( /WebKit\/([\d.]+)/ ),
chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
ua.match( /CriOS\/([\d.]+)/ ),
ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i),
firefox = ua.match( /Firefox\/([\d.]+)/ ),
safari = ua.match( /Safari\/([\d.]+)/ ),
opera = ua.match( /OPR\/([\d.]+)/ );
webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
ie && (ret.ie = parseFloat( ie[ 1 ] ));
firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
safari && (ret.safari = parseFloat( safari[ 1 ] ));
opera && (ret.opera = parseFloat( opera[ 1 ] ));
})( navigator.userAgent ),
* @description
操作系统检查结果??
* * `android`
如果在android浏览器环境下，此值为对应的android版本号，否则为`undefined`??
* * `ios` 如果在ios浏览器环境下，此值为对应的ios版本号，否则为`undefined`??
* @property {Object} [os]
os: (function( ua ) {
var ret = {},
// osx = !!ua.match( /\(Macintosh\; Intel / ),
android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
// osx && (ret.osx = true);
android && (ret.android = parseFloat( android[ 1 ] ));
ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
})( navigator.userAgent ),
* 实现类与类之间的继承??
* @method inherits
* @grammar Base.inherits( super ) =& child
* @grammar Base.inherits( super, protos ) =& child
* @grammar Base.inherits( super, protos, statics ) =& child
{Class} super 父类
{Object | Function} [protos] 子类或者对象。如果对象中包含constructor，子类将是用此属性值??
{Function} [protos.constructor] 子类构造器，不指定的话将创建个临时的直接执行父类构造器的方法??
{Object} [statics] 静态属性或方法??
* @return {Class} 返回子类??
* @example
* function Person() {
console.log( 'Super' );
* Person.prototype.hello = function() {
console.log( 'hello' );
* var Manager = Base.inherits( Person, {
world: function() {
console.log( 'World' );
* // 因为没有指定构造器，父类的构造器将会执行??
* var instance = new Manager();
// =& Super
* // 继承子父类的方法
* instance.hello();
// =& hello
* instance.world();
// =& World
* // 子类的__super__属性指向父??
* console.log( Manager.__super__ === Person );
// =& true
inherits: function( Super, protos, staticProtos ) {
if ( typeof protos === 'function' ) {
} else if ( protos && protos.hasOwnProperty('constructor') ) {
child = protos.
child = function() {
return Super.apply( this, arguments );
// 复制静态方??
$.extend( true, child, Super, staticProtos || {} );
/* jshint camelcase: false */
// 让子类的__super__属性指向父类??
child.__super__ = Super.
// 构建原型，添加原型方法或属性??
// 暂时用Object.create实现??
child.prototype = createObject( Super.prototype );
protos && $.extend( true, child.prototype, protos );
* 一个不做任何事情的方法。可以用来赋值给默认的callback.
* @method noop
noop: noop,
* 返回一个新的方法，此方法将已指定的`context`来执行??
* @grammar Base.bindFn( fn, context ) =& Function
* @method bindFn
* @example
* var doSomething = function() {
console.log( this.name );
name: 'Object Name'
aliasFn = Base.bind( doSomething, obj );
aliasFn();
// =& Object Name
bindFn: bindFn,
* 引用Console.log如果存在的话，否则引用一个[空函数loop](#WebUploader:Base.log)??
* @grammar Base.log( args... ) =& undefined
* @method log
log: (function() {
if ( window.console ) {
return bindFn( console.log, console );
nextTick: (function() {
return function( cb ) {
setTimeout( cb, 1 );
// @bug 当浏览器不在当前窗口时就停了??
// var next = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( cb ) {
window.setTimeout( cb, 1000 / 60 );
// // fix: Uncaught TypeError: Illegal invocation
// return bindFn( next, window );
* 被[uncurrythis](/2011/11/uncurrying-this.html)的数组slice方法??
* 将用来将非数组对象转化成数组对象??
* @grammar Base.slice( target, start[, end] ) =& Array
* @method slice
* @example
* function doSomthing() {
var args = Base.slice( arguments, 1 );
console.log( args );
* doSomthing( 'ignored', 'arg2', 'arg3' );
// =& Array [&arg2&, &arg3&]
slice: uncurryThis( [].slice ),
* 生成唯一的ID
* @method guid
* @grammar Base.guid() =& String
* @grammar Base.guid( prefx ) =& String
guid: (function() {
var counter = 0;
return function( prefix ) {
var guid = (+new Date()).toString( 32 ),
for ( ; i & 5; i++ ) {
guid += Math.floor( Math.random() * 65535 ).toString( 32 );
return (prefix || 'wu_') + guid + (counter++).toString( 32 );
* 格式化文件大?? 输出成带单位的字符串
* @method formatSize
* @grammar Base.formatSize( size ) =& String
* @grammar Base.formatSize( size, pointLength ) =& String
* @grammar Base.formatSize( size, pointLength, units ) =& String
* @param {Number} size 文件大小
* @param {Number} [pointLength=2] 精确到的小数点数??
* @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节，到千字节，一直往上指定。如果单位数组里面只指定了到了K(千字??，同时文件大小大于M, 此方法的输出将还是显示成多少K.
* @example
* console.log( Base.formatSize( 100 ) );
// =& 100B
* console.log( Base.formatSize( 1024 ) );
// =& 1.00K
* console.log( Base.formatSize( 1024, 0 ) );
* console.log( Base.formatSize( 1024 * 1024 ) );
// =& 1.00M
* console.log( Base.formatSize( 1024 * 1024 * 1024 ) );
// =& 1.00G
* console.log( Base.formatSize( 1024 * 1024 * 1024, 0, ['B', 'KB', 'MB'] ) );
// =& 1024MB
formatSize: function( size, pointLength, units ) {
units = units || [ 'B', 'K', 'M', 'G', 'TB' ];
while ( (unit = units.shift()) && size & 1024 ) {
size = size / 1024;
return (unit === 'B' ? size : size.toFixed( pointLength || 2 )) +
* 事件处理类，可以独立使用，也可以扩展给对象使用??
* @fileOverview Mediator
define('mediator',[
'base'
], function( Base ) {
var $ = Base.$,
slice = [].slice,
separator = /\s+/,
// 根据条件过滤出事件handlers.
function findHandlers( arr, name, callback, context ) {
return $.grep( arr, function( handler ) {
return handler &&
(!name || handler.e === name) &&
(!callback || handler.cb === callback ||
handler.cb._cb === callback) &&
(!context || handler.ctx === context);
function eachEvent( events, callback, iterator ) {
// 不支持对象，只支持多个event用空格隔开
$.each( (events || '').split( separator ), function( _, key ) {
iterator( key, callback );
function triggerHanders( events, args ) {
var stoped = false,
len = events.length,
while ( ++i & len ) {
handler = events[ i ];
if ( handler.cb.apply( handler.ctx2, args ) === false ) {
protos = {
* 绑定事件??
* `callback`方法在执行时，arguments将会来源于trigger的时候携带的参数。如
* ```javascript
* var obj = {};
* // 使得obj有事件行??
* Mediator.installTo( obj );
* obj.on( 'testa', function( arg1, arg2 ) {
console.log( arg1, arg2 ); // =& 'arg1', 'arg2'
* obj.trigger( 'testa', 'arg1', 'arg2' );
* 如果`callback`中，某一个方法`return false`了，则后续的其他`callback`都不会被执行到??
* 切会影响到`trigger`方法的返回值，为`false`??
* `on`还可以用来添加一个特殊事件`all`, 这样所有的事件触发都会响应到。同时此类`callback`中的arguments有一个不同处??
* 就是第一个参数为`type`，记录当前是什么事件在触发。此类`callback`的优先级比脚低，会再正常`callback`执行完后触发??
* ```javascript
* obj.on( 'all', function( type, arg1, arg2 ) {
console.log( type, arg1, arg2 ); // =& 'testa', 'arg1', 'arg2'
* @method on
* @grammar on( name, callback[, context] ) =& self
事件名，支持多个事件用空格隔开
{Function} callback 事件处理??
事件处理器的上下文??
* @return {self} 返回自身，方便链??
* @chainable
* @class Mediator
on: function( name, callback, context ) {
var me = this,
if ( !callback ) {
set = this._events || (this._events = []);
eachEvent( name, callback, function( name, callback ) {
var handler = { e: name };
handler.cb =
handler.ctx =
handler.ctx2 = context ||
handler.id = set.
set.push( handler );
* 绑定事件，且当handler执行完后，自动解除绑定??
* @method once
* @grammar once( name, callback[, context] ) =& self
{Function} callback 事件处理??
事件处理器的上下文??
* @return {self} 返回自身，方便链??
* @chainable
once: function( name, callback, context ) {
if ( !callback ) {
eachEvent( name, callback, function( name, callback ) {
var once = function() {
me.off( name, once );
return callback.apply( context || me, arguments );
once._cb =
me.on( name, once, context );
* 解除事件绑定
* @method off
* @grammar off( [name[, callback[, context] ] ] ) =& self
{Function} [callback] 事件处理??
事件处理器的上下文??
* @return {self} 返回自身，方便链??
* @chainable
off: function( name, cb, ctx ) {
var events = this._
if ( !events ) {
if ( !name && !cb && !ctx ) {
this._events = [];
eachEvent( name, cb, function( name, cb ) {
$.each( findHandlers( events, name, cb, ctx ), function() {
delete events[ this.id ];
* 触发事件
* @method trigger
* @grammar trigger( name[, args...] ) =& self
{*} [...] 任意参数
* @return {Boolean} 如果handler中return false了，则返回false, 否则返回true
trigger: function( type ) {
var args, events, allE
if ( !this._events || !type ) {
args = slice.call( arguments, 1 );
events = findHandlers( this._events, type );
allEvents = findHandlers( this._events, 'all' );
return triggerHanders( events, args ) &&
triggerHanders( allEvents, arguments );
* 中介者，它本身是个单例，但可以通过[installTo](#WebUploader:Mediator:installTo)方法，使任何对象具备事件行为??
* 主要目的是负责模块与模块之间的合作，降低耦合度??
* @class Mediator
return $.extend({
* 可以通过这个接口，使任何对象具备事件功能??
* @method installTo
{Object} obj 需要具备事件行为的对象??
* @return {Object} 返回obj.
installTo: function( obj ) {
return $.extend( obj, protos );
}, protos );
* @fileOverview Uploader上传??
define('uploader',[
'base',
'mediator'
], function( Base, Mediator ) {
var $ = Base.$;
* 上传入口类??
* @class Uploader
* @constructor
* @grammar new Uploader( opts ) =& Uploader
* @example
* var uploader = WebUploader.Uploader({
swf: 'path_of_swf/Uploader.swf',
// 开起分片上传??
chunked: true
function Uploader( opts ) {
this.options = $.extend( true, {}, Uploader.options, opts );
this._init( this.options );
// default Options
// widgets中有相应扩展
Uploader.options = {};
Mediator.installTo( Uploader.prototype );
// 批量添加纯命令式方法??
upload: 'start-upload',
stop: 'stop-upload',
getFile: 'get-file',
getFiles: 'get-files',
addFile: 'add-file',
addFiles: 'add-file',
sort: 'sort-files',
removeFile: 'remove-file',
skipFile: 'skip-file',
retry: 'retry',
isInProgress: 'is-in-progress',
makeThumb: 'make-thumb',
getDimension: 'get-dimension',
addButton: 'add-btn',
getRuntimeType: 'get-runtime-type',
refresh: 'refresh',
disable: 'disable',
enable: 'enable',
reset: 'reset'
}, function( fn, command ) {
Uploader.prototype[ fn ] = function() {
return this.request( command, arguments );
$.extend( Uploader.prototype, {
state: 'pending',
_init: function( opts ) {
me.request( 'init', opts, function() {
me.state = 'ready';
me.trigger('ready');
* 获取或者设置Uploader配置项??
* @method option
* @grammar option( key ) =& *
* @grammar option( key, val ) =& self
* @example
* // 初始状态图片上传前不会压缩
* var uploader = new WebUploader.Uploader({
* // 修改后图片上传前，尝试将图片压缩??600 * 1600
* uploader.options( 'resize', {
width: 1600,
height: 1600
option: function( key, val ) {
var opts = this.
if ( arguments.length & 1 ) {
if ( $.isPlainObject( val ) &&
$.isPlainObject( opts[ key ] ) ) {
$.extend( opts[ key ], val );
opts[ key ] =
return key ? opts[ key ] :
* 获取文件统计信息。返回一个包含一下信息的对象??
* * `successNum` 上传成功的文件数
* * `uploadFailNum` 上传失败的文件数
* * `cancelNum` 被删除的文件??
* * `invalidNum` 无效的文件数
* * `queueNum` 还在队列中的文件??
* @method getStats
* @grammar getStats() =& Object
getStats: function() {
// return this._mgr.getStats.apply( this._mgr, arguments );
var stats = this.request('get-stats');
successNum: stats.numOfSuccess,
// who care?
// queueFailNum: 0,
cancelNum: stats.numOfCancel,
invalidNum: stats.numOfInvalid,
uploadFailNum: stats.numOfUploadFailed,
queueNum: stats.numOfQueue
// 需要重写此方法来来支持opts.onEvent和instance.onEvent的处理器
trigger: function( type/*, args...*/ ) {
var args = [].slice.call( arguments, 1 ),
opts = this.options,
name = 'on' + type.substring( 0, 1 ).toUpperCase() +
type.substring( 1 );
// 调用通过on方法注册的handler.
Mediator.trigger.apply( this, arguments ) === false ||
// 调用opts.onEvent
$.isFunction( opts[ name ] ) &&
opts[ name ].apply( this, args ) === false ||
// 调用this.onEvent
$.isFunction( this[ name ] ) &&
this[ name ].apply( this, args ) === false ||
// 广播所有uploader的事件??
Mediator.trigger.apply( Mediator,
[ this, type ].concat( args ) ) === false ) {
// widgets/widget.js将补充此方法的详细文档??
request: Base.noop
* 创建Uploader实例，等同于new Uploader( opts );
* @method create
* @class Base
* @grammar Base.create( opts ) =& Uploader
Base.create = Uploader.create = function( opts ) {
return new Uploader( opts );
// 暴露Uploader，可以通过它来扩展业务逻辑??
Base.Uploader = U
* @fileOverview Runtime管理器，负责Runtime的选择, 连接
define('runtime/runtime',[
'base',
'mediator'
], function( Base, Mediator ) {
var $ = Base.$,
factories = {},
// 获取对象的第一个key
getFirstKey = function( obj ) {
for ( var key in obj ) {
if ( obj.hasOwnProperty( key ) ) {
// 接口类??
function Runtime( options ) {
this.options = $.extend({
container: document.body
}, options );
this.uid = Base.guid('rt_');
$.extend( Runtime.prototype, {
getContainer: function() {
var opts = this.options,
if ( this._container ) {
return this._
parent = $( opts.container || document.body );
container = $( document.createElement('div') );
container.attr( 'id', 'rt_' + this.uid );
container.css({
position: 'absolute',
top: '0px',
left: '0px',
width: '1px',
height: '1px',
overflow: 'hidden'
parent.append( container );
parent.addClass('webuploader-container');
this._container =
init: Base.noop,
exec: Base.noop,
destroy: function() {
if ( this._container ) {
this._container.parentNode.removeChild( this.__container );
this.off();
Runtime.orders = 'html5,flash';
* 添加Runtime实现??
* @param {String} type
* @param {Runtime} factory 具体Runtime实现??
Runtime.addRuntime = function( type, factory ) {
factories[ type ] =
Runtime.hasRuntime = function( type ) {
return !!(type ? factories[ type ] : getFirstKey( factories ));
Runtime.create = function( opts, orders ) {
orders = orders || Runtime.
$.each( orders.split( /\s*,\s*/g ), function() {
if ( factories[ this ] ) {
type = type || getFirstKey( factories );
if ( !type ) {
throw new Error('Runtime Error');
runtime = new factories[ type ]( opts );
Mediator.installTo( Runtime.prototype );
* @fileOverview Runtime管理器，负责Runtime的选择, 连接
define('runtime/client',[
'base',
'mediator',
'runtime/runtime'
], function( Base, Mediator, Runtime ) {
cache = (function() {
var obj = {};
add: function( runtime ) {
obj[ runtime.uid ] =
get: function( ruid, standalone ) {
if ( ruid ) {
return obj[ ruid ];
for ( i in obj ) {
// 有些类型不能重用，比如filepicker.
if ( standalone && obj[ i ].__standalone ) {
return obj[ i ];
remove: function( runtime ) {
delete obj[ runtime.uid ];
function RuntimeClient( component, standalone ) {
var deferred = Base.Deferred(),
this.uid = Base.guid('client_');
// 允许runtime没有初始化之前，注册一些方法在初始化后执行??
this.runtimeReady = function( cb ) {
return deferred.done( cb );
this.connectRuntime = function( opts, cb ) {
// already connected.
if ( runtime ) {
throw new Error('already connected!');
deferred.done( cb );
if ( typeof opts === 'string' && cache.get( opts ) ) {
runtime = cache.get( opts );
// 像filePicker只能独立存在，不能公用??
runtime = runtime || cache.get( null, standalone );
// 需要创??
if ( !runtime ) {
runtime = Runtime.create( opts, opts.runtimeOrder );
runtime.__promise = deferred.promise();
runtime.once( 'ready', deferred.resolve );
runtime.init();
cache.add( runtime );
runtime.__client = 1;
// 来自cache
Base.$.extend( runtime.options, opts );
runtime.__promise.then( deferred.resolve );
runtime.__client++;
standalone && (runtime.__standalone = standalone);
this.getRuntime = function() {
this.disconnectRuntime = function() {
if ( !runtime ) {
runtime.__client--;
if ( runtime.__client &= 0 ) {
cache.remove( runtime );
delete runtime.__
runtime.destroy();
this.exec = function() {
if ( !runtime ) {
var args = Base.slice( arguments );
component && args.unshift( component );
return runtime.exec.apply( this, args );
this.getRuid = function() {
return runtime && runtime.
this.destroy = (function( destroy ) {
return function() {
destroy && destroy.apply( this, arguments );
this.trigger('destroy');
this.off();
this.exec('destroy');
this.disconnectRuntime();
})( this.destroy );
Mediator.installTo( RuntimeClient.prototype );
return RuntimeC
* @fileOverview 错误信息
define('lib/dnd',[
'base',
'mediator',
'runtime/client'
], function( Base, Mediator, RuntimeClent ) {
var $ = Base.$;
function DragAndDrop( opts ) {
opts = this.options = $.extend({}, DragAndDrop.options, opts );
opts.container = $( opts.container );
if ( !opts.container.length ) {
RuntimeClent.call( this, 'DragAndDrop' );
DragAndDrop.options = {
accept: null,
disableGlobalDnd: false
Base.inherits( RuntimeClent, {
constructor: DragAndDrop,
init: function() {
me.connectRuntime( me.options, function() {
me.exec('init');
me.trigger('ready');
destroy: function() {
this.disconnectRuntime();
Mediator.installTo( DragAndDrop.prototype );
return DragAndD
* @fileOverview 组件基类??
define('widgets/widget',[
'base',
'uploader'
], function( Base, Uploader ) {
var $ = Base.$,
_init = Uploader.prototype._init,
IGNORE = {},
widgetClass = [];
function isArrayLike( obj ) {
if ( !obj ) {
var length = obj.length,
type = $.type( obj );
if ( obj.nodeType === 1 && length ) {
return type === 'array' || type !== 'function' && type !== 'string' &&
(length === 0 || typeof length === 'number' && length & 0 &&
(length - 1) in obj);
function Widget( uploader ) {
this.owner =
this.options = uploader.
$.extend( Widget.prototype, {
init: Base.noop,
// 类Backbone的事件监听声明，监听uploader实例上的事件
// widget直接无法监听事件，事件只能通过uploader来传??
invoke: function( apiName, args ) {
'make-thumb': 'makeThumb'
var map = this.responseM
// 如果无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
request: function() {
return this.owner.request.apply( this.owner, arguments );
// 扩展Uploader.
$.extend( Uploader.prototype, {
// 覆写_init用来初始化widgets
_init: function() {
var me = this,
widgets = me._widgets = [];
$.each( widgetClass, function( _, klass ) {
widgets.push( new klass( me ) );
return _init.apply( me, arguments );
request: function( apiName, args, callback ) {
var i = 0,
widgets = this._widgets,
len = widgets.length,
rlts = [],
dfds = [],
widget, rlt, promise,
args = isArrayLike( args ) ? args : [ args ];
for ( ; i & i++ ) {
widget = widgets[ i ];
rlt = widget.invoke( apiName, args );
if ( rlt !== IGNORE ) {
// Deferred对象
if ( Base.isPromise( rlt ) ) {
dfds.push( rlt );
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(),
setTimeout(function() {
deferred.resolve.apply( deferred, args );
return deferred.promise();
})[ key ]( callback || Base.noop );
return rlts[ 0 ];
* 添加组件
{object} widgetProto 组件原型，构造函数通过constructor属性定??
{object} responseMap API名称与函数实现的映射
* @example
Uploader.register( {
init: function( options ) {},
makeThumb: function() {}
'make-thumb': 'makeThumb'
Uploader.register = Widget.register = function( responseMap, widgetProto ) {
var map = { init: 'init' },
if ( arguments.length === 1 ) {
widgetProto = responseM
widgetProto.responseMap =
widgetProto.responseMap = $.extend( map, responseMap );
klass = Base.inherits( Widget, widgetProto );
widgetClass.push( klass );
* @fileOverview DragAndDrop Widget??
define('widgets/filednd',[
'base',
'uploader',
'lib/dnd',
'widgets/widget'
], function( Base, Uploader, Dnd ) {
var $ = Base.$;
Uploader.options.dnd = '';
* @property {Selector} [dnd=undefined]
指定Drag And Drop拖拽的容器，如果不指定，则不启动??
* @namespace options
* @for Uploader
* @event dndAccept
* @param {DataTransferItemList} items DataTransferItem
* @description 阻止此事件可以拒绝某些类型的文件拖入进来。目前只??chrome 提供这样??API，且只能通过 mime-type 验证??
return Uploader.register({
init: function( opts ) {
if ( !opts.dnd ||
this.request('predict-runtime-type') !== 'html5' ) {
var me = this,
deferred = Base.Deferred(),
options = $.extend({}, {
disableGlobalDnd: opts.disableGlobalDnd,
container: opts.dnd,
accept: opts.accept
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();
* @fileOverview 错误信息
define('lib/filepaste',[
'base',
'mediator',
'runtime/client'
], function( Base, Mediator, RuntimeClent ) {
var $ = Base.$;
function FilePaste( opts ) {
opts = this.options = $.extend({}, opts );
opts.container = $( opts.container || document.body );
RuntimeClent.call( this, 'FilePaste' );
Base.inherits( RuntimeClent, {
constructor: FilePaste,
init: function() {
me.connectRuntime( me.options, function() {
me.exec('init');
me.trigger('ready');
destroy: function() {
this.exec('destroy');
this.disconnectRuntime();
this.off();
Mediator.installTo( FilePaste.prototype );
return FileP
* @fileOverview 组件基类??
define('widgets/filepaste',[
'base',
'uploader',
'lib/filepaste',
'widgets/widget'
], function( Base, Uploader, FilePaste ) {
var $ = Base.$;
* @property {Selector} [paste=undefined]
指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为`document.body`.
* @namespace options
* @for Uploader
return Uploader.register({
init: function( opts ) {
if ( !opts.paste ||
this.request('predict-runtime-type') !== 'html5' ) {
var me = this,
deferred = Base.Deferred(),
options = $.extend({}, {
container: opts.paste,
accept: opts.accept
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();
* @fileOverview Blob
define('lib/blob',[
'base',
'runtime/client'
], function( Base, RuntimeClient ) {
function Blob( ruid, source ) {
me.source =
RuntimeClient.call( me, 'Blob' );
this.uid = source.uid || this.
this.type = source.type || '';
this.size = source.size || 0;
if ( ruid ) {
me.connectRuntime( ruid );
Base.inherits( RuntimeClient, {
constructor: Blob,
slice: function( start, end ) {
return this.exec( 'slice', start, end );
getSource: function() {
return this.
* 为了统一化Flash的File和HTML5的File而存在??
* 以至于要调用Flash里面的File，也可以像调用HTML5版本的File一下??
* @fileOverview File
define('lib/file',[
'base',
'lib/blob'
], function( Base, Blob ) {
var uid = 1,
rExt = /\.([^.]+)$/;
function File( ruid, file ) {
Blob.apply( this, arguments );
this.name = file.name || ('untitled' + uid++);
ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
// todo 支持其他类型文件的转换??
// 如果有mimetype, 但是文件名里面没有找出后缀规律
if ( !ext && this.type ) {
ext = /\/(jpg|jpeg|png|gif|bmp)$/i.exec( this.type ) ?
RegExp.$1.toLowerCase() : '';
this.name += '.' +
// 如果没有指定mimetype, 但是知道文件后缀??
if ( !this.type &&
~'jpg,jpeg,png,gif,bmp'.indexOf( ext ) ) {
this.type = 'image/' + (ext === 'jpg' ? 'jpeg' : ext);
this.ext =
this.lastModifiedDate = file.lastModifiedDate ||
(new Date()).toLocaleString();
return Base.inherits( Blob, File );
* @fileOverview 错误信息
define('lib/filepicker',[
'base',
'runtime/client',
'lib/file'
], function( Base, RuntimeClent, File ) {
var $ = Base.$;
function FilePicker( opts ) {
opts = this.options = $.extend({}, FilePicker.options, opts );
opts.container = $( opts.id );
if ( !opts.container.length ) {
throw new Error('按钮指定错误');
opts.innerHTML = opts.innerHTML || opts.label ||
opts.container.html() || '';
opts.button = $( opts.button || document.createElement('div') );
opts.button.html( opts.innerHTML );
opts.container.html( opts.button );
RuntimeClent.call( this, 'FilePicker', true );
FilePicker.options = {
button: null,
container: null,
label: null,
innerHTML: null,
multiple: true,
accept: null,
name: 'file'
Base.inherits( RuntimeClent, {
constructor: FilePicker,
init: function() {
var me = this,
opts = me.options,
button = opts.
button.addClass('webuploader-pick');
me.on( 'all', function( type ) {
switch ( type ) {
case 'mouseenter':
button.addClass('webuploader-pick-hover');
case 'mouseleave':
button.removeClass('webuploader-pick-hover');
case 'change':
files = me.exec('getFiles');
me.trigger( 'select', $.map( files, function( file ) {
file = new File( me.getRuid(), file );
// 记录来源??
file._refer = opts.
}), opts.container );
me.connectRuntime( opts, function() {
me.refresh();
me.exec( 'init', opts );
me.trigger('ready');
$( window ).on( 'resize', function() {
me.refresh();
refresh: function() {
var shimContainer = this.getRuntime().getContainer(),
button = this.options.button,
width = button.outerWidth ?
button.outerWidth() : button.width(),
height = button.outerHeight ?
button.outerHeight() : button.height(),
pos = button.offset();
width && height && shimContainer.css({
bottom: 'auto',
right: 'auto',
width: width + 'px',
height: height + 'px'
}).offset( pos );
enable: function() {
var btn = this.options.
btn.removeClass('webuploader-pick-disable');
this.refresh();
disable: function() {
var btn = this.options.
this.getRuntime().getContainer().css({
top: '-99999px'
btn.addClass('webuploader-pick-disable');
destroy: function() {
if ( this.runtime ) {
this.exec('destroy');
this.disconnectRuntime();
return FileP
* @fileOverview 文件选择相关
define('widgets/filepicker',[
'base',
'uploader',
'lib/filepicker',
'widgets/widget'
], function( Base, Uploader, FilePicker ) {
var $ = Base.$;
$.extend( Uploader.options, {
* @property {Selector | Object} [pick=undefined]
* @namespace options
* @for Uploader
* @description 指定选择文件的按钮容器，不指定则不创建按钮??
* * `id` {Seletor} 指定选择文件的按钮容器，不指定则不创建按钮??
* * `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({
'add-btn': 'addButton',
refresh: 'refresh',
disable: 'disable',
enable: 'enable'
init: function( opts ) {
this.pickers = [];
return opts.pick && this.addButton( opts.pick );
refresh: function() {
$.each( this.pickers, function() {
this.refresh();
* @method addButton
* @for Uploader
* @grammar addButton( pick ) =& Promise
* @description
* 添加文件选择按钮，如果一个按钮不够，需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致??
* @example
* uploader.addButton({
id: '#btnContainer',
innerHTML: '选择文件'
addButton: function( pick ) {
var me = this,
opts = me.options,
accept = opts.accept,
options, picker,
if ( !pick ) {
deferred = Base.Deferred();
$.isPlainObject( pick ) || (pick = {
options = $.extend({}, pick, {
accept: $.isPlainObject( accept ) ? [ accept ] : accept,
swf: opts.swf,
runtimeOrder: opts.runtimeOrder
picker = new FilePicker( options );
picker.once( 'ready', deferred.resolve );
picker.on( 'select', function( files ) {
me.owner.request( 'add-file', [ files ]);
picker.init();
this.pickers.push( picker );
return deferred.promise();
disable: function() {
$.each( this.pickers, function() {
this.disable();
enable: function() {
$.each( this.pickers, function() {
this.enable();
* @fileOverview Image
define('lib/image',[
'base',
'runtime/client',
'lib/blob'
], function( Base, RuntimeClient, Blob ) {
var $ = Base.$;
// 构造器??
function Image( opts ) {
this.options = $.extend({}, Image.options, opts );
RuntimeClient.call( this, 'Image' );
this.on( 'load', function() {
this._info = this.exec('info');
this._meta = this.exec('meta');
// 默认选项??
Image.options = {
// 默认的图片处理质??
quality: 90,
// 是否裁剪
crop: false,
// 是否保留头部信息
preserveHeaders: true,
// 是否允许放大??
allowMagnify: true
// 继承RuntimeClient.
Base.inherits( RuntimeClient, {
constructor: Image,
info: function( val ) {
if ( val ) {
this._info =
return this._
meta: function( val ) {
if ( val ) {
this._meta =
return this._
loadFromBlob: function( blob ) {
var me = this,
ruid = blob.getRuid();
this.connectRuntime( ruid, function() {
me.exec( 'init', me.options );
me.exec( 'loadFromBlob', blob );
resize: function() {
var args = Base.slice( arguments );
return this.exec.apply( this, [ 'resize' ].concat( args ) );
getAsDataUrl: function( type ) {
return this.exec( 'getAsDataUrl', type );
getAsBlob: function( type ) {
var blob = this.exec( 'getAsBlob', type );
return new Blob( this.getRuid(), blob );
* @fileOverview 图片操作, 负责预览图片和上传前压缩图片
define('widgets/image',[
'base',
'uploader',
'lib/image',
'widgets/widget'
], function( Base, Uploader, Image ) {
var $ = Base.$,
// 根据要处理的文件大小来节流，一次不能处理太多，会卡??
throttle = (function( max ) {
var occupied = 0,
waiting = [],
tick = function() {
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 -=
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,
// 是否保留头部meta信息??
preserveHeaders: false,
// 为空的话则保留原有图片格式??
// 否则强制转换成指定的类型??
type: 'image/jpeg'
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
compress: {
width: 1600,
height: 1600,
quality: 90,
allowMagnify: false,
crop: false,
preserveHeaders: true
return Uploader.register({
'make-thumb': 'makeThumb',
'before-send-file': 'compressImage'
* 生成缩略图，此过程为异步，所以需要传入`callback`??
* 通常情况在图片加入队里后调用此方法来生成预览图以增强交互效果??
* `callback`中可以接收到两个参数??
* * 第一个为error，如果生成缩略图有错误，此error将为真??
* * 第二个为ret, 缩略图的Data URL值??
* **注意**
* Date URL在IE6/7中不支持，所以不用调用此方法了，直接显示一张暂不支持预览图片好了??
* @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('预览错误');
$li.append('&img alt=&& src=&' + ret + '& /&');
makeThumb: function( file, cb, width, height ) {
file = this.request( 'get-file', file );
// 只预览图片格式??
if ( !file.type.match( /^image/ ) ) {
cb( true );
opts = $.extend({}, this.options.thumb );
// 如果传入的是object.
if ( $.isPlainObject( width ) ) {
opts = $.extend( opts, width );
width = width || opts.
height = height || opts.
image = new Image( opts );
image.once( 'load', function() {
file._info = file._info || ();
file._meta = file._meta || image.meta();
image.resize( width, height );
image.once( 'complete', function() {
cb( false, image.getAsDataUrl( opts.type ) );
image.destroy();
image.once( 'error', function() {
cb( true );
image.destroy();
throttle( image, file.source.size, function() {
file._info && ( file._info );
file._meta && image.meta( file._meta );
image.loadFromBlob( file.source );
compressImage: function( file ) {
var opts = press || this.options.resize,
compressSize = opts && pressSize || 300 * 1024,
file = this.request( 'get-file', file );
// 只预览图片格式??
if ( !opts || !~'image/jpeg,image/jpg'.indexOf( file.type ) ||
file.size & compressSize ||
file._compressed ) {
opts = $.extend({}, opts );
deferred = Base.Deferred();
image = new Image( opts );
deferred.always(function() {
image.destroy();
image.once( 'error', deferred.reject );
image.once( 'load', function() {
file._info = file._info || ();
file._meta = file._meta || image.meta();
image.resize( opts.width, opts.height );
image.once( 'complete', function() {
// 移动??UC / qq 浏览器的无图模式??
// ctx.getImageData 处理大图的时候会??Exception
// INDEX_SIZE_ERR: DOM Exception 1
blob = image.getAsBlob( opts.type );
size = file.
// 如果压缩后，比原来还大则不用压缩后的??
if ( blob.size & size ) {
// file.source.destroy && file.source.destroy();
file.source =
file.size = blob.
file.trigger( 'resize', blob.size, size );
// 标记，避免重复压缩??
file._compressed =
deferred.resolve();
} catch ( e ) {
// 出错了直接继续，让其上传原始图片
deferred.resolve();
file._info && ( file._info );
file._meta && image.meta( file._meta );
image.loadFromBlob( file.source );
return deferred.promise();
* @fileOverview 文件属性封??
define('file',[
'base',
'mediator'
], function( Base, Mediator ) {
var $ = Base.$,
idPrefix = 'WU_FILE_',
idSuffix = 0,
rExt = /\.([^.]+)$/,
statusMap = {};
function gid() {
return idPrefix + idSuffix++;
* @class File
* @constructor 构造函??
* @grammar new File( source ) =& File
* @param {Lib.File} source [lib.File](#Lib.File)实例, 此source对象是带有Runtime信息的??
function WUFile( source ) {
* 文件名，包括扩展名（后缀??
* @property name
* @type {string}
this.name = source.name || 'Untitled';
* 文件体积（字节）
* @property size
* @type {uint}
* @default 0
this.size = source.size || 0;
* 文件MIMETYPE类型，与文件类型的对应关系请参考[http://t.cn/z8ZnFny](http://t.cn/z8ZnFny)
* @property type
* @type {string}
* @default 'application'
this.type = source.type || 'application';
* 文件最后修改日??
* @property lastModifiedDate
* @type {int}
* @default 当前时间??
this.lastModifiedDate = source.lastModifiedDate || (new Date() * 1);
* 文件ID，每个对象具有唯一ID，与文件名无??
* @property id
* @type {string}
this.id = gid();
* 文件扩展名，通过文件名获取，例如test.png的扩展名为png
* @property ext
* @type {string}
this.ext = rExt.exec( this.name ) ? RegExp.$1 : '';
* 状态文字说明。在不同的status语境下有不同的用途??
* @property statusText
* @type {string}
this.statusText = '';
// 存储文件状态，防止通过属性直接修??
statusMap[ this.id ] = WUFile.Status.INITED;
this.source =
this.loaded = 0;
this.on( 'error', function( msg ) {
this.setStatus( WUFile.Status.ERROR, msg );
$.extend( WUFile.prototype, {
* 设置状态，状态变化时会触发`change`事件??
* @method setStatus
* @grammar setStatus( status[, statusText] );
* @param {File.Status|String} status [文件状态值](#WebUploader:File:File.Status)
* @param {String} [statusText=''] 状态说明，常在error时使用，用http, abort,server等来标记是由于什么原因导致文件错误??
setStatus: function( status, text ) {
var prevStatus = statusMap[ this.id ];
typeof text !== 'undefined' && (this.statusText = text);
if ( status !== prevStatus ) {
statusMap[ this.id ] =
* 文件状态变??
* @event statuschange
this.trigger( 'statuschange', status, prevStatus );
* 获取文件状??
* @return {File.Status}
* @example
文件状态具体包括以下几种类型：
// 已入队列
// 正在上传
// 上传出错
// 上传成功
// 上传取消
CANCELLED:
getStatus: function() {
return statusMap[ this.id ];
* 获取文件原始信息??
* @return {*}
getSource: function() {
return this.
destory: function() {
delete statusMap[ this.id ];
Mediator.installTo( WUFile.prototype );
* 文件状态值，具体包括以下几种类型??
* * `inited` 初始状??
* * `queued` 已经进入队列, 等待上传
* * `progress` 上传??
* * `complete` 上传完成??
* * `error` 上传出错，可重试
* * `interrupt` 上传中断，可续传??
* * `invalid` 文件不合格，不能重试上传。会自动从队列中移除??
* * `cancelled` 文件被移除??
* @property {Object} Status
* @namespace File
* @class File
WUFile.Status = {
'inited',
// 初始状??
'queued',
// 已经进入队列, 等待上传
'progress',
'error',
// 上传出错，可重试
'complete',
// 上传完成??
CANCELLED:
'cancelled',
// 上传取消??
INTERRUPT:
'interrupt',
// 上传中断，可续传??
'invalid'
// 文件不合格，不能重试上传??
return WUF
* @fileOverview 文件队列
define('queue',[
'base',
'mediator',
'file'
], function( Base, Mediator, WUFile ) {
var $ = Base.$,
STATUS = WUFile.S
* 文件队列, 用来存储各个状态中的文件??
* @class Queue
* @extends Mediator
function Queue() {
* 统计文件数??
* * `numOfQueue` 队列中的文件数??
* * `numOfSuccess` 上传成功的文件数
* * `numOfCancel` 被移除的文件??
* * `numOfProgress` 正在上传中的文件??
* * `numOfUploadFailed` 上传错误的文件数??
* * `numOfInvalid` 无效的文件数??
* @property {Object} stats
this.stats = {
numOfQueue: 0,
numOfSuccess: 0,
numOfCancel: 0,
numOfProgress: 0,
numOfUploadFailed: 0,
numOfInvalid: 0
// 上传队列，仅包括等待上传的文??
this._queue = [];
// 存储所有文??
this._map = {};
$.extend( Queue.prototype, {
* 将新文件加入对队列尾??
* @method append
{File} file
append: function( file ) {
this._queue.push( file );
this._fileAdded( file );
* 将新文件加入对队列头??
* @method prepend
{File} file
prepend: function( file ) {
this._queue.unshift( file );
this._fileAdded( file );
* 获取文件对象
* @method getFile
{String} fileId
* @return {File}
getFile: function( fileId ) {
if ( typeof fileId !== 'string' ) {
return fileId;
return this._map[ fileId ];
* 从队列中取出一个指定状态的文件??
* @grammar fetch( status ) =& File
* @method fetch
* @param {String} status [文件状态值](#WebUploader:File:File.Status)
* @return {File} [File](#WebUploader:File)
fetch: function( status ) {
var len = this._queue.length,
status = status || STATUS.QUEUED;
for ( i = 0; i & i++ ) {
file = this._queue[ i ];
if ( status === file.getStatus() ) {
* 对队列进行排序，能够控制文件上传顺序??
* @grammar sort( fn ) =& undefined
* @method sort
* @param {Function} fn 排序方法
sort: function( fn ) {
if ( typeof fn === 'function' ) {
this._queue.sort( fn );
* 获取指定类型的文件列?? 列表中每一个成员为[File](#WebUploader:File)对象??
* @grammar getFiles( [status1[, status2 ...]] ) =& Array
* @method getFiles
* @param {String} [status] [文件状态值](#WebUploader:File:File.Status)
getFiles: function() {
var sts = [].slice.call( arguments, 0 ),
len = this._queue.length,
for ( ; i & i++ ) {
file = this._queue[ i ];
if ( sts.length && !~$.inArray( file.getStatus(), sts ) ) {
ret.push( file );
_fileAdded: function( file ) {
var me = this,
existing = this._map[ file.id ];
if ( !existing ) {
this._map[ file.id ] =
file.on( 'statuschange', function( cur, pre ) {
me._onFileStatusChange( cur, pre );
file.setStatus( STATUS.QUEUED );
_onFileStatusChange: function( curStatus, preStatus ) {
var stats = this.
switch ( preStatus ) {
case STATUS.PROGRESS:
stats.numOfProgress--;
case STATUS.QUEUED:
stats.numOfQueue --;
case STATUS.ERROR:
stats.numOfUploadFailed--;
case STATUS.INVALID:
stats.numOfInvalid--;
switch ( curStatus ) {
case STATUS.QUEUED:
stats.numOfQueue++;
case STATUS.PROGRESS:
stats.numOfProgress++;
case STATUS.ERROR:
stats.numOfUploadFailed++;
stats.numOfSuccess++;
case STATUS.CANCELLED:
stats.numOfCancel++;
case STATUS.INVALID:
stats.numOfInvalid++;
Mediator.installTo( Queue.prototype );
* @fileOverview 队列
define('widgets/queue',[
'base',
'uploader',
'queue',
'file',
'lib/file',
'runtime/client',
'widgets/widget'
], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
var $ = Base.$,
rExt = /\.\w+$/,
Status = WUFile.S
return Uploader.register({
'sort-files': 'sortFiles',
'add-file': 'addFiles',
'get-file': 'getFile',
'fetch-file': 'fetchFile',
'get-stats': 'getStats',
'get-files': 'getFiles',
'remove-file': 'removeFile',
'retry': 'retry',
'reset': 'reset',
'accept-file': 'acceptFile'
init: function( opts ) {
var me = this,
deferred, len, i, item, arr, accept,
if ( $.isPlainObject( opts.accept ) ) {
opts.accept = [ opts.accept ];
// accept中的中生成匹配正则??
if ( opts.accept ) {
for ( i = 0, len = opts.accept. i & i++ ) {
item = opts.accept[ i ].
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.
// 如果当前不是html5运行时，那就算了??
// 不执行后续操??
if ( this.request('predict-runtime-type') !== 'html5' ) {
// 创建一??html5 运行时的 placeholder
// 以至于外部添加原??File 对象的时候能正确包裹一下供 webuploader 使用??
deferred = Base.Deferred();
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 );
// 判断文件是否可以被加入队??
acceptFile: function( file ) {
var invalid = !file || file.size & 6 || this.accept &&
// 如果名字中有后缀，才做后缀白名单处理??
rExt.exec( file.name ) && !this.accept.test( file.name );
* @event beforeFileQueued
* @param {File} file File对象
* @description 当文件被加入队列之前触发，此事件的handler返回值为`false`，则此文件不会被添加进入队列??
* @event fileQueued
* @param {File} file File对象
* @description 当文件被加入队列以后触发??
_addFile: function( file ) {
file = me._wrapFile( file );
// 不过类型判断允许不允许，先派??`beforeFileQueued`
if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
// 类型不匹配，则派送错误事件，并返回??
if ( !me.acceptFile( file ) ) {
me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
me.queue.append( file );
me.owner.trigger( 'fileQueued', file );
getFile: function( fileId ) {
return this.queue.getFile( fileId );
* @event filesQueued
* @param {File} files 数组，内容为原始File(lib/File）对象??
* @description 当一批文件添加进队列以后触发??
* @method addFiles
* @grammar addFiles( file ) =& undefined
* @grammar addFiles( [file1, file2 ...] ) =& undefined
* @param {Array of File or File} [files] Files 对象 数组
* @description 添加文件到队??
addFiles: function( files ) {
if ( !files.length ) {
files = [ files ];
files = $.map( files, function( file ) {
return me._addFile( file );
me.owner.trigger( 'filesQueued', files );
if ( me.options.auto ) {
me.request('start-upload');
getStats: function() {
return this.
* @event fileDequeued
* @param {File} file File对象
* @description 当文件被移除队列后触发??
* @method removeFile
* @grammar removeFile( file ) =& undefined
* @grammar removeFile( id ) =& undefined
* @param {File|id} file File对象或这File对象的id
* @description 移除某一文件??
* @example
* $li.on('click', '.remove-this', function() {
uploader.removeFile( file );
removeFile: function( file ) {
file = file.id ? file : me.queue.getFile( file );
file.setStatus( Status.CANCELLED );
me.owner.trigger( 'fileDequeued', file );
* @method getFiles
* @grammar getFiles() =& Array
* @grammar getFiles( status1, status2, status... ) =& Array
* @description 返回指定状态的文件集合，不传参数将返回所有状态的文件??
* @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 重试上传，重试指定文件，或者从出错的文件开始重新上传??
* @example
* function retry() {
uploader.retry();
retry: function( file, noForceStart ) {
var me = this,
if ( file ) {
file = file.id ? file : me.queue.getFile( file );
file.setStatus( Status.QUEUED );
noForceStart || me.request('start-upload');
files = me.queue.getFiles( Status.ERROR );
len = files.
for ( ; i & i++ ) {
file = files[ i ];
file.setStatus( Status.QUEUED );
me.request('start-upload');
* @method sort
* @grammar sort( fn ) =& undefined
* @description 排序队列中的文件，在上传之前调整可以控制上传顺序??
sortFiles: function() {
return this.queue.sort.apply( this.queue, arguments );
* @method reset
* @grammar reset() =& undefined
* @description 重置uploader。目前只重置了队列??
* @example
* uploader.reset();
reset: function() {
this.queue = new Queue();
this.stats = this.queue.
* @fileOverview 添加获取Runtime相关信息的方法??
define('widgets/runtime',[
'uploader',
'runtime/runtime',
'widgets/widget'
], function( Uploader, Runtime ) {
Uploader.support = function() {
return Runtime.hasRuntime.apply( Runtime, arguments );
return Uploader.register({
'predict-runtime-type': 'predictRuntmeType'
init: function() {
if ( !this.predictRuntmeType() ) {
throw Error('Runtime Error');
* 预测Uploader将采用哪个`Runtime`
* @grammar predictRuntmeType() =& String
* @method predictRuntmeType
predictRuntmeType: function() {
var orders = this.options.runtimeOrder || Runtime.orders,
type = this.type,
if ( !type ) {
orders = orders.split( /\s*,\s*/g );
for ( i = 0, len = orders. i & i++ ) {
if ( Runtime.hasRuntime( orders[ i ] ) ) {
this.type = type = orders[ i ];
* @fileOverview Transport
define('lib/transport',[
'base',
'runtime/client',
'mediator'
], function( Base, RuntimeClient, Mediator ) {
var $ = Base.$;
function Transport( opts ) {
opts = me.options = $.extend( true, {}, Transport.options, opts || {} );
RuntimeClient.call( this, 'Transport' );
this._blob =
this._formData = opts.formData || {};
this._headers = opts.headers || {};
this.on( 'progress', this._timeout );
this.on( 'load error', function() {
me.trigger( 'progress', 1 );
clearTimeout( me._timer );
Transport.options = {
server: '',
method: 'POST',
// 跨域时，是否允许携带cookie, 只有html5 runtime才有??
withCredentials: false,
fileVal: 'file',
timeout: 2 * 60 * 1000,
formData: {},
headers: {},
sendAsBinary: false
$.extend( Transport.prototype, {
// 添加Blob, 只能添加一次，最后一次有效??
appendBlob: function( key, blob, filename ) {
var me = this,
opts = me.
if ( me.getRuid() ) {
me.disconnectRuntime();
// 连接到blob归属的同一个runtime.
me.connectRuntime( blob.ruid, function() {
me.exec('init');
me._blob =
opts.fileVal = key || opts.fileV
opts.filename = filename || opts.
// 添加其他字段
append: function( key, value ) {
if ( typeof key === 'object' ) {
$.extend( this._formData, key );
this._formData[ key ] =
setRequestHeader: function( key, value ) {
if ( typeof key === 'object' ) {
$.extend( this._headers, key );
this._headers[ key ] =
send: function( method ) {
this.exec( 'send', method );
this._timeout();
abort: function() {
clearTimeout( this._timer );
return this.exec('abort');
destroy: function() {
this.trigger('destroy');
this.off();
this.exec('destroy');
this.disconnectRuntime();
getResponse: function() {
return this.exec('getResponse');
getResponseAsJson: function() {
return this.exec('getResponseAsJson');
getStatus: function() {
return this.exec('getStatus');
_timeout: function() {
var me = this,
duration = me.options.
if ( !duration ) {
clearTimeout( me._timer );
me._timer = setTimeout(function() {
me.abort();
me.trigger( 'error', 'timeout' );
}, duration );
// 让Transport具备事件功能??
Mediator.installTo( Transport.prototype );
* @fileOverview 负责文件上传相关??
define('widgets/upload',[
'base',
'uploader',
'file',
'lib/transport',
'widgets/widget'
], function( Base, Uploader, WUFile, Transport ) {
var $ = Base.$,
isPromise = Base.isPromise,
Status = WUFile.S
// 添加默认配置??
$.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 如果要分片，分多大一片？ 默认大小??M.
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: null
* @property {Object} [fileVal='file']
* @namespace options
* @for Uploader
* @description 设置文件上传域的name??
* @property {Object} [method='POST']
* @namespace options
* @for Uploader
* @description 文件上传方式，`POST`或者`GET`??
* @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,
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++
file.blocks = pending.concat();
file.remaning = pending.
file: file,
has: function() {
return !!pending.
fetch: function() {
return pending.shift();
Uploader.register({
'start-upload': 'start',
'stop-upload': 'stop',
'skip-file': 'skipFile',
'is-in-progress': 'isInProgress'
init: function() {
var owner = this.
this.runing =
// 记录当前正在传的数据，跟threads相关
this.pool = [];
// 缓存即将上传的文件??
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 file.
delete file.
* @event startUpload
* @description 当开始上传流程时触发??
* 开始上传。此方法可以从初始状态调用开始上传流程，也可以从暂停状态调用，继续上传流程??
* @grammar upload() =& undefined
* @method upload
start: function() {
// 移出invalid的文??
$.each( me.request( 'get-files', Status.INVALID ), function() {
me.request( 'remove-file', this );
if ( me.runing ) {
me.runing =
// 如果有暂停的，则续传
$.each( me.pool, function( _, v ) {
var file = v.
if ( file.getStatus() === Status.INTERRUPT ) {
file.setStatus( Status.PROGRESS );
me._trigged =
v.transport && v.transport.send();
me._trigged =
me.owner.trigger('startUpload');
Base.nextTick( me.__tick );
* @event stopUpload
* @description 当开始上传流程暂停时触发??
* 暂停上传。第一个参数为是