/*! WebUploader 0.1.2 */ /** * @fileOverview 让内部各个部件的代码可以用[amd](https://github.com/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来。 * * AMD API 内部的简单不完全实现,请忽略。只有当WebUploader被合并成一个文件的时候才会引入。 */ (function (root, factory) { var modules = {}, // 内部require, 简单不完全实现。 // https://github.com/amdjs/amdjs-api/wiki/require _require = function (deps, callback) { var args, len, i; // 如果deps不是数组,则直接返回指定module if (typeof deps === 'string') { return getModule(deps); } else { args = []; for (len = deps.length, i = 0; i < len; i++) { args.push(getModule(deps[i])); } return callback.apply(null, args); } }, // 内部define,暂时不支持不指定id. _define = function (id, deps, factory) { if (arguments.length === 2) { factory = deps; deps = null; } _require(deps || [], function () { setModule(id, factory, arguments); }); }, // 设置module, 兼容CommonJs写法。 setModule = function (id, factory, args) { var module = { exports: factory }, returned; if (typeof factory === 'function') { args.length || (args = [_require, module.exports, module]); returned = factory.apply(null, args); returned !== undefined && (module.exports = returned); } modules[id] = module.exports; }, // 根据id获取module getModule = function (id) { var module = modules[id] || root[id]; if (!module) { throw new Error('`' + id + '` is undefined'); } return module; }, // 将所有modules,将路径ids装换成对象。 exportsTo = function (obj) { var key, host, parts, part, last, ucFirst; // make the first character upper case. ucFirst = function (str) { return str && (str.charAt(0).toUpperCase() + str.substr(1)); }; for (key in modules) { host = obj; if (!modules.hasOwnProperty(key)) { continue; } 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), origin; // 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 = 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); } else { // Browser globals case. Just assign the // result to a property on the global. origin = root.WebUploader; root.WebUploader = exports; root.WebUploader.noConflict = function () { root.WebUploader = origin; }; } })(this, function (window, define, require) { /** * @fileOverview jQuery or Zepto */ define('dollar-third', [], function () { return window.jQuery || window.Zepto; }); /** * @fileOverview Dom 操作相关 */ define('dollar', [ 'dollar-third' ], function (_) { return _; }); /** * @fileOverview 使用jQuery的Promise */ define('promise-third', [ 'dollar' ], function ($) { return { Deferred: $.Deferred, when: $.when, isPromise: function (anything) { return anything && typeof anything.then === 'function'; } }; }); /** * @fileOverview Promise/A+ */ define('promise', [ 'promise-third' ], function (_) { return _; }); /** * @fileOverview 基础类方法。 */ /** * Web Uploader内部类的详细说明,以下提及的功能类,都可以在`WebUploader`这个变量中访问到。 * * As you know, Web Uploader的每个文件都是用过[AMD](https://github.com/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.call; // http://jsperf.com/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) { var f; if (Object.create) { return Object.create(proto); } else { f = function () { }; f.prototype = proto; return new f(); } } /** * 基础类,提供一些简单常用的方法。 * @class Base */ return { /** * @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浏览器版本号,如果浏览器为非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])); return ret; })(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, '.'))); return ret; })(navigator.userAgent), /** * 实现类与类之间的继承。 * @method inherits * @grammar Base.inherits( super ) => child * @grammar Base.inherits( super, protos ) => child * @grammar Base.inherits( super, protos, statics ) => child * @param {Class} super 父类 * @param {Object | Function} [protos] 子类或者对象。如果对象中包含constructor,子类将是用此属性值。 * @param {Function} [protos.constructor] 子类构造器,不指定的话将创建个临时的直接执行父类构造器的方法。 * @param {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) { var child; if (typeof protos === 'function') { child = protos; protos = null; } else if (protos && protos.hasOwnProperty('constructor')) { child = protos.constructor; } else { child = function () { return Super.apply(this, arguments); }; } // 复制静态方法 $.extend(true, child, Super, staticProtos || {}); /* jshint camelcase: false */ // 让子类的__super__属性指向父类。 child.__super__ = Super.prototype; // 构建原型,添加原型方法或属性。 // 暂时用Object.create实现。 child.prototype = createObject(Super.prototype); protos && $.extend(true, child.prototype, protos); return child; }, /** * 一个不做任何事情的方法。可以用来赋值给默认的callback. * @method noop */ noop: noop, /** * 返回一个新的方法,此方法将已指定的`context`来执行。 * @grammar Base.bindFn( fn, context ) => Function * @method bindFn * @example * var doSomething = function() { * console.log( this.name ); * }, * obj = { * 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); } return noop; })(), 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](http://www.2ality.com/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), i = 0; 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 ) ); // => 1K * 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) { var unit; units = units || ['B', 'K', 'M', 'G', 'TB']; while ((unit = units.shift()) && size > 1024) { size = size / 1024; } return (unit === 'B' ? size : size.toFixed(pointLength || 2)) + unit; } }; }); /** * 事件处理类,可以独立使用,也可以扩展给对象使用。 * @fileOverview Mediator */ define('mediator', [ 'base' ], function (Base) { var $ = Base.$, slice = [].slice, separator = /\s+/, protos; // 根据条件过滤出事件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, i = -1, len = events.length, handler; while (++i < len) { handler = events[i]; if (handler.cb.apply(handler.ctx2, args) === false) { stoped = true; break; } } return !stoped; } 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 * @param {String} name 事件名,支持多个事件用空格隔开 * @param {Function} callback 事件处理器 * @param {Object} [context] 事件处理器的上下文。 * @return {self} 返回自身,方便链式 * @chainable * @class Mediator */ on: function (name, callback, context) { var me = this, set; if (!callback) { return this; } set = this._events || (this._events = []); eachEvent(name, callback, function (name, callback) { var handler = { e: name }; handler.cb = callback; handler.ctx = context; handler.ctx2 = context || me; handler.id = set.length; set.push(handler); }); return this; }, /** * 绑定事件,且当handler执行完后,自动解除绑定。 * @method once * @grammar once( name, callback[, context] ) => self * @param {String} name 事件名 * @param {Function} callback 事件处理器 * @param {Object} [context] 事件处理器的上下文。 * @return {self} 返回自身,方便链式 * @chainable */ once: function (name, callback, context) { var me = this; if (!callback) { return me; } eachEvent(name, callback, function (name, callback) { var once = function () { me.off(name, once); return callback.apply(context || me, arguments); }; once._cb = callback; me.on(name, once, context); }); return me; }, /** * 解除事件绑定 * @method off * @grammar off( [name[, callback[, context] ] ] ) => self * @param {String} [name] 事件名 * @param {Function} [callback] 事件处理器 * @param {Object} [context] 事件处理器的上下文。 * @return {self} 返回自身,方便链式 * @chainable */ off: function (name, cb, ctx) { var events = this._events; if (!events) { return this; } if (!name && !cb && !ctx) { this._events = []; return this; } eachEvent(name, cb, function (name, cb) { $.each(findHandlers(events, name, cb, ctx), function () { delete events[this.id]; }); }); return this; }, /** * 触发事件 * @method trigger * @grammar trigger( name[, args...] ) => self * @param {String} type 事件名 * @param {*} [...] 任意参数 * @return {Boolean} 如果handler中return false了,则返回false, 否则返回true */ trigger: function (type) { var args, events, allEvents; if (!this._events || !type) { return this; } 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 * @param {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); // 批量添加纯命令式方法。 $.each({ 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) { var me = this; 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({ * resize: null; * }); * * // 修改后图片上传前,尝试将图片压缩到1600 * 1600 * uploader.options( 'resize', { * width: 1600, * height: 1600 * }); */ option: function (key, val) { var opts = this.options; // setter if (arguments.length > 1) { if ($.isPlainObject(val) && $.isPlainObject(opts[key])) { $.extend(opts[key], val); } else { opts[key] = val; } } else { // getter return key ? opts[key] : opts; } }, /** * 获取文件统计信息。返回一个包含一下信息的对象。 * * `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'); return { 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); if ( // 调用通过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) { return false; } return true; }, // widgets/widget.js将补充此方法的详细文档。 request: Base.noop }); /** * 创建Uploader实例,等同于new Uploader( opts ); * @method create * @class Base * @static * @grammar Base.create( opts ) => Uploader */ Base.create = Uploader.create = function (opts) { return new Uploader(opts); }; // 暴露Uploader,可以通过它来扩展业务逻辑。 Base.Uploader = Uploader; return Uploader; }); /** * @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)) { return key; } } return null; }; // 接口类。 function Runtime(options) { this.options = $.extend({ container: document.body }, options); this.uid = Base.guid('rt_'); } $.extend(Runtime.prototype, { getContainer: function () { var opts = this.options, parent, container; if (this._container) { return this._container; } 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 = container; return 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] = factory; }; Runtime.hasRuntime = function (type) { return !!(type ? factories[type] : getFirstKey(factories)); }; Runtime.create = function (opts, orders) { var type, runtime; orders = orders || Runtime.orders; $.each(orders.split(/\s*,\s*/g), function () { if (factories[this]) { type = this; return false; } }); type = type || getFirstKey(factories); if (!type) { throw new Error('Runtime Error'); } runtime = new factories[type](opts); return runtime; }; Mediator.installTo(Runtime.prototype); return Runtime; }); /** * @fileOverview Runtime管理器,负责Runtime的选择, 连接 */ define('runtime/client', [ 'base', 'mediator', 'runtime/runtime' ], function (Base, Mediator, Runtime) { var cache; cache = (function () { var obj = {}; return { add: function (runtime) { obj[runtime.uid] = runtime; }, get: function (ruid, standalone) { var i; if (ruid) { return obj[ruid]; } for (i in obj) { // 有些类型不能重用,比如filepicker. if (standalone && obj[i].__standalone) { continue; } return obj[i]; } return null; }, remove: function (runtime) { delete obj[runtime.uid]; } }; })(); function RuntimeClient(component, standalone) { var deferred = Base.Deferred(), runtime; 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; } else { // 来自cache Base.$.extend(runtime.options, opts); runtime.__promise.then(deferred.resolve); runtime.__client++; } standalone && (runtime.__standalone = standalone); return runtime; }; this.getRuntime = function () { return runtime; }; this.disconnectRuntime = function () { if (!runtime) { return; } runtime.__client--; if (runtime.__client <= 0) { cache.remove(runtime); delete runtime.__promise; runtime.destroy(); } runtime = null; }; this.exec = function () { if (!runtime) { return; } var args = Base.slice(arguments); component && args.unshift(component); return runtime.exec.apply(this, args); }; this.getRuid = function () { return runtime && runtime.uid; }; 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 RuntimeClient; }); /** * @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) { return; } RuntimeClent.call(this, 'DragAndDrop'); } DragAndDrop.options = { accept: null, disableGlobalDnd: false }; Base.inherits(RuntimeClent, { constructor: DragAndDrop, init: function () { var me = this; me.connectRuntime(me.options, function () { me.exec('init'); me.trigger('ready'); }); }, destroy: function () { this.disconnectRuntime(); } }); Mediator.installTo(DragAndDrop.prototype); return DragAndDrop; }); /** * @fileOverview 组件基类。 */ define('widgets/widget', [ 'base', 'uploader' ], function (Base, Uploader) { var $ = Base.$, _init = Uploader.prototype._init, 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, { // 覆写_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, 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; setTimeout(function () { deferred.resolve.apply(deferred, args); }, 1); return deferred.promise(); })[key](callback || Base.noop); } else { return rlts[0]; } } }); /** * 添加组件 * @param {Object} widgetProto 组件原型,构造函数通过constructor属性定义 * @param {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' }, klass; if (arguments.length === 1) { widgetProto = responseMap; widgetProto.responseMap = map; } else { widgetProto.responseMap = $.extend(map, responseMap); } klass = Base.inherits(Widget, widgetProto); widgetClass.push(klass); return klass; }; return Widget; }); /** * @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 验证。 * @for Uploader */ return Uploader.register({ 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; 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 () { var me = this; 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 FilePaste; }); /** * @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') { return; } var me = this, deferred = Base.Deferred(), options = $.extend({}, { container: opts.paste, accept: opts.accept }), 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(); } }); }); /** * @fileOverview Blob */ define('lib/blob', [ 'base', 'runtime/client' ], function (Base, RuntimeClient) { function Blob(ruid, source) { var me = this; me.source = source; me.ruid = ruid; RuntimeClient.call(me, 'Blob'); this.uid = source.uid || this.uid; 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.source; } }); return Blob; }); /** * 为了统一化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) { var ext; 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 += '.' + ext; } // 如果没有指定mimetype, 但是知道文件后缀。 if (!this.type && ~'jpg,jpeg,png,gif,bmp'.indexOf(ext)) { this.type = 'image/' + (ext === 'jpg' ? 'jpeg' : ext); } this.ext = 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; button.addClass('webuploader-pick'); me.on('all', function (type) { var files; switch (type) { case 'mouseenter': button.addClass('webuploader-pick-hover'); break; case 'mouseleave': button.removeClass('webuploader-pick-hover'); break; case 'change': files = me.exec('getFiles'); me.trigger('select', $.map(files, function (file) { file = new File(me.getRuid(), file); // 记录来源。 file._refer = opts.container; return file; }), opts.container); break; } }); 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.button; btn.removeClass('webuploader-pick-disable'); this.refresh(); }, disable: function () { var btn = this.options.button; this.getRuntime().getContainer().css({ top: '-99999px' }); btn.addClass('webuploader-pick-disable'); }, destroy: function () { if (this.runtime) { this.exec('destroy'); this.disconnectRuntime(); } } }); return FilePicker; }); /** * @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, deferred; if (!pick) { return; } deferred = Base.Deferred(); $.isPlainObject(pick) || (pick = { id: 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 文件属性封装 */ 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 = 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] = status; /** * 文件状态变化 * @event statuschange */ this.trigger('statuschange', status, prevStatus); } }, /** * 获取文件状态 * @return {File.Status} * @example 文件状态具体包括以下几种类型: { // 初始化 INITED: 0, // 已入队列 QUEUED: 1, // 正在上传 PROGRESS: 2, // 上传出错 ERROR: 3, // 上传成功 COMPLETE: 4, // 上传取消 CANCELLED: 5 } */ getStatus: function () { return statusMap[this.id]; }, /** * 获取文件原始信息。 * @return {*} */ getSource: function () { return this.source; }, 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 * @static */ WUFile.Status = { INITED: 'inited', // 初始状态 QUEUED: 'queued', // 已经进入队列, 等待上传 PROGRESS: 'progress', // 上传中 ERROR: 'error', // 上传出错,可重试 COMPLETE: 'complete', // 上传完成。 CANCELLED: 'cancelled', // 上传取消。 INTERRUPT: 'interrupt', // 上传中断,可续传。 INVALID: 'invalid' // 文件不合格,不能重试上传。 }; return WUFile; }); /** * @fileOverview 文件队列 */ define('queue', [ 'base', 'mediator', 'file' ], function (Base, Mediator, WUFile) { var $ = Base.$, STATUS = WUFile.Status; /** * 文件队列, 用来存储各个状态中的文件。 * @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 * @param {File} file 文件对象 */ append: function (file) { this._queue.push(file); this._fileAdded(file); return this; }, /** * 将新文件加入对队列头部 * * @method prepend * @param {File} file 文件对象 */ prepend: function (file) { this._queue.unshift(file); this._fileAdded(file); return this; }, /** * 获取文件对象 * * @method getFile * @param {String} fileId 文件ID * @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, i, file; status = status || STATUS.QUEUED; for (i = 0; i < len; i++) { file = this._queue[i]; if (status === file.getStatus()) { return file; } } return null; }, /** * 对队列进行排序,能够控制文件上传顺序。 * @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), ret = [], i = 0, len = this._queue.length, file; for (; i < len; i++) { file = this._queue[i]; if (sts.length && !~$.inArray(file.getStatus(), sts)) { continue; } ret.push(file); } return ret; }, _fileAdded: function (file) { var me = this, existing = this._map[file.id]; if (!existing) { this._map[file.id] = file; file.on('statuschange', function (cur, pre) { me._onFileStatusChange(cur, pre); }); } file.setStatus(STATUS.QUEUED); }, _onFileStatusChange: function (curStatus, preStatus) { var stats = this.stats; switch (preStatus) { case STATUS.PROGRESS: stats.numOfProgress--; break; case STATUS.QUEUED: stats.numOfQueue--; break; case STATUS.ERROR: stats.numOfUploadFailed--; break; case STATUS.INVALID: stats.numOfInvalid--; break; } switch (curStatus) { case STATUS.QUEUED: stats.numOfQueue++; break; case STATUS.PROGRESS: stats.numOfProgress++; break; case STATUS.ERROR: stats.numOfUploadFailed++; break; case STATUS.COMPLETE: stats.numOfSuccess++; break; case STATUS.CANCELLED: stats.numOfCancel++; break; case STATUS.INVALID: stats.numOfInvalid++; break; } } }); Mediator.installTo(Queue.prototype); return Queue; }); /** * @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.Status; 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, 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(); 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 < 6 || 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 */ /** * @method addFiles * @grammar addFiles( file ) => undefined * @grammar addFiles( [file1, file2 ...] ) => undefined * @param {Array of File or File} [files] Files 对象 数组 * @description 添加文件到队列 * @for Uploader */ addFiles: function (files) { var me = this; 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.stats; }, /** * @event fileDequeued * @param {File} file File对象 * @description 当文件被移除队列后触发。 * @for Uploader */ /** * @method removeFile * @grammar removeFile( file ) => undefined * @grammar removeFile( id ) => undefined * @param {File|id} file File对象或这File对象的id * @description 移除某一文件。 * @for Uploader * @example * * $li.on('click', '.remove-this', function() { * uploader.removeFile( file ); * }) */ removeFile: function (file) { var me = this; 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 返回指定状态的文件集合,不传参数将返回所有状态的文件。 * @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); }, /** * @method reset * @grammar reset() => undefined * @description 重置uploader。目前只重置了队列。 * @for Uploader * @example * uploader.reset(); */ reset: function () { this.queue = new Queue(); this.stats = this.queue.stats; } }); }); /** * @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 * @for Uploader */ predictRuntmeType: 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; } }); }); /** * @fileOverview Transport */ define('lib/transport', [ 'base', 'runtime/client', 'mediator' ], function (Base, RuntimeClient, Mediator) { var $ = Base.$; function Transport(opts) { var me = this; opts = me.options = $.extend(true, {}, Transport.options, opts || {}); RuntimeClient.call(this, 'Transport'); this._blob = null; 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, // 2分钟 formData: {}, headers: {}, sendAsBinary: false }; $.extend(Transport.prototype, { // 添加Blob, 只能添加一次,最后一次有效。 appendBlob: function (key, blob, filename) { var me = this, opts = me.options; if (me.getRuid()) { me.disconnectRuntime(); } // 连接到blob归属的同一个runtime. me.connectRuntime(blob.ruid, function () { me.exec('init'); }); me._blob = blob; opts.fileVal = key || opts.fileVal; opts.filename = filename || opts.filename; }, // 添加其他字段 append: function (key, value) { if (typeof key === 'object') { $.extend(this._formData, key); } else { this._formData[key] = value; } }, setRequestHeader: function (key, value) { if (typeof key === 'object') { $.extend(this._headers, key); } else { this._headers[key] = value; } }, 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.timeout; if (!duration) { return; } clearTimeout(me._timer); me._timer = setTimeout(function () { me.abort(); me.trigger('error', 'timeout'); }, duration); } }); // 让Transport具备事件功能。 Mediator.installTo(Transport.prototype); return Transport; }); /** * @fileOverview 负责文件上传相关。 */ define('widgets/upload', [ 'base', 'uploader', 'file', 'lib/transport', 'widgets/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: 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, len; 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++ }); start += len; } file.blocks = pending.concat(); file.remaning = pending.length; return { file: file, has: function () { return !!pending.length; }, 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.owner; this.runing = false; // 记录当前正在传的数据,跟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 v.transport; }); delete file.blocks; delete file.remaning; }); }, /** * @event startUpload * @description 当开始上传流程时触发。 * @for Uploader */ /** * 开始上传。此方法可以从初始状态调用开始上传流程,也可以从暂停状态调用,继续上传流程。 * @grammar upload() => undefined * @method upload * @for Uploader */ start: function () { var me = this; // 移出invalid的文件 $.each(me.request('get-files', Status.INVALID), function () { me.request('remove-file', this); }); if (me.runing) { return; } me.runing = true; // 如果有暂停的,则续传 $.each(me.pool, function (_, v) { var file = v.file; if (file.getStatus() === Status.INTERRUPT) { file.setStatus(Status.PROGRESS); me._trigged = false; v.transport && v.transport.send(); } }); me._trigged = false; me.owner.trigger('startUpload'); Base.nextTick(me.__tick); }, /** * @event stopUpload * @description 当开始上传流程暂停时触发。 * @for Uploader */ /** * 暂停上传。第一个参数为是否中断上传当前正在上传的文件。 * @grammar stop() => undefined * @grammar stop( true ) => undefined * @method stop * @for Uploader */ stop: function (interrupt) { var me = this; if (me.runing === false) { return; } me.runing = false; interrupt && $.each(me.pool, function (_, v) { v.transport && v.transport.abort(); v.file.setStatus(Status.INTERRUPT); }); me.owner.trigger('stopUpload'); }, /** * 判断`Uplaode`r是否正在上传中。 * @grammar isInProgress() => Boolean * @method isInProgress * @for Uploader */ isInProgress: function () { return !!this.runing; }, getStats: function () { return this.request('get-stats'); }, /** * 掉过一个文件上传,直接标记指定文件为已上传状态。 * @grammar skipFile( file ) => undefined * @method skipFile * @for Uploader */ skipFile: function (file, status) { 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.runing = false; me._trigged || Base.nextTick(function () { me.owner.trigger('uploadFinished'); }); me._trigged = true; } }, _nextBlock: function () { var me = this, act = me._act, opts = me.options, next, done; // 如果当前文件还有没有需要传输的,则直接返回剩下的。 if (act && act.has() && act.file.getStatus() === Status.PROGRESS) { // 是否提前准备下一个文件 if (opts.prepareNextFile && !me.pending.length) { me._prepareNextFile(); } return act.fetch(); // 否则,如果正在运行,则准备下一个文件,并等待完成后返回下个分片。 } 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._act = act; return act.fetch(); }; // 文件可能还在prepare中,也有可能已经完全准备好了。 return isPromise(next) ? next[next.pipe ? 'pipe' : 'then'](done) : 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.QUEUED) { me.owner.trigger('uploadStart', file); file.setStatus(Status.PROGRESS); return file; } return me._finishFile(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; 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._popBlock(block); Base.nextTick(me.__tick); } }); }, /** * @event uploadBeforeSend * @param {Object} object * @param {Object} data 默认的上传参数,可以扩展此对象来控制上传参数。 * @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) { var totalPercent = 0, uploaded = 0; // 可能没有abort掉,progress还是执行进来了。 // if ( !file.blocks ) { // return; // } totalPercent = block.percentage = percentage; if (block.chunks > 1) { // 计算文件的整体速度。 $.each(file.blocks, function (_, v) { uploaded += (v.percentage || 0) * (v.end - v.start); }); totalPercent = uploaded / file.size; } owner.trigger('uploadProgress', file, totalPercent || 0); }); // 用来询问,是否返回的结果是有错误的。 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); }); } }); }); /** * @fileOverview 各种验证,包括文件总大小是否超出、单文件是否超出和文件是否重复。 */ define('widgets/validator', [ 'base', 'uploader', 'file', 'widgets/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`添加的文件总大小超出这个值时派送。 * @for Uploader */ // 暴露给外面的api api = { // 添加验证器 addValidator: function (type, cb) { validators[type] = cb; }, // 移除验证器 removeValidator: function (type) { delete validators[type]; } }; // 在Uploader初始化的时候启动Validators的初始化 Uploader.register({ init: function () { var me = this; $.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 = opts.fileNumLimit >> 0, 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('uploadFinished', 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 = opts.fileSizeLimit >> 0, 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('uploadFinished', 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', file); return false; } }); }); /** * @property {int} [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]); }); }); return api; }); /** * @fileOverview Runtime管理器,负责Runtime的选择, 连接 */ define('runtime/compbase', [], function () { function CompBase(owner, runtime) { this.owner = owner; this.options = owner.options; this.getRuntime = function () { return runtime; }; this.getRuid = function () { return runtime.uid; }; this.trigger = function () { return owner.trigger.apply(owner, arguments); }; } return CompBase; }); /** * @fileOverview Html5Runtime */ define('runtime/html5/runtime', [ 'base', 'runtime/runtime', 'runtime/compbase' ], function (Base, Runtime, CompBase) { var type = 'html5', components = {}; function Html5Runtime() { var pool = {}, me = this, destory = this.destory; Runtime.apply(me, arguments); me.type = type; // 这个方法的调用者,实际上是RuntimeClient me.exec = function (comp, fn/*, args...*/) { var client = this, uid = client.uid, args = Base.slice(arguments, 2), instance; if (components[comp]) { instance = pool[uid] = pool[uid] || new components[comp](client, me); if (instance[fn]) { return instance[fn].apply(instance, args); } } }; me.destory = function () { // @todo 删除池子中的所有实例 return destory && destory.apply(this, arguments); }; } Base.inherits(Runtime, { constructor: Html5Runtime, // 不需要连接其他程序,直接执行callback init: function () { var me = this; setTimeout(function () { me.trigger('ready'); }, 1); } }); // 注册Components Html5Runtime.register = function (name, component) { var klass = components[name] = Base.inherits(CompBase, component); return klass; }; // 注册html5运行时。 // 只有在支持的前提下注册。 if (window.Blob && window.FileReader && window.DataView) { Runtime.addRuntime(type, Html5Runtime); } return Html5Runtime; }); /** * @fileOverview Blob Html实现 */ define('runtime/html5/blob', [ 'runtime/html5/runtime', 'lib/blob' ], function (Html5Runtime, Blob) { return Html5Runtime.register('Blob', { slice: function (start, end) { var blob = this.owner.source, slice = blob.slice || blob.webkitSlice || blob.mozSlice; blob = slice.call(blob, start, end); return new Blob(this.getRuid(), blob); } }); }); /** * @fileOverview FilePaste */ define('runtime/html5/dnd', [ 'base', 'runtime/html5/runtime', 'lib/file' ], function (Base, Html5Runtime, File) { var $ = Base.$, prefix = 'webuploader-dnd-'; return Html5Runtime.register('DragAndDrop', { init: function () { var elem = this.elem = this.options.container; this.dragEnterHandler = Base.bindFn(this._dragEnterHandler, this); this.dragOverHandler = Base.bindFn(this._dragOverHandler, this); this.dragLeaveHandler = Base.bindFn(this._dragLeaveHandler, this); this.dropHandler = Base.bindFn(this._dropHandler, this); this.dndOver = false; elem.on('dragenter', this.dragEnterHandler); elem.on('dragover', this.dragOverHandler); elem.on('dragleave', this.dragLeaveHandler); elem.on('drop', this.dropHandler); if (this.options.disableGlobalDnd) { $(document).on('dragover', this.dragOverHandler); $(document).on('drop', this.dropHandler); } }, _dragEnterHandler: function (e) { var me = this, denied = me._denied || false, items; e = e.originalEvent || e; if (!me.dndOver) { me.dndOver = true; // 注意只有 chrome 支持。 items = e.dataTransfer.items; if (items && items.length) { me._denied = denied = !me.trigger('accept', items); } me.elem.addClass(prefix + 'over'); me.elem[denied ? 'addClass' : 'removeClass'](prefix + 'denied'); } e.dataTransfer.dropEffect = denied ? 'none' : 'copy'; return false; }, _dragOverHandler: function (e) { // 只处理框内的。 var parentElem = this.elem.parent().get(0); if (parentElem && !$.contains(parentElem, e.currentTarget)) { return false; } clearTimeout(this._leaveTimer); this._dragEnterHandler.call(this, e); return false; }, _dragLeaveHandler: function () { var me = this, handler; handler = function () { me.dndOver = false; me.elem.removeClass(prefix + 'over ' + prefix + 'denied'); }; clearTimeout(me._leaveTimer); me._leaveTimer = setTimeout(handler, 100); return false; }, _dropHandler: function (e) { var me = this, ruid = me.getRuid(), parentElem = me.elem.parent().get(0); // 只处理框内的。 if (parentElem && !$.contains(parentElem, e.currentTarget)) { return false; } me._getTansferFiles(e, function (results) { me.trigger('drop', $.map(results, function (file) { return new File(ruid, file); })); }); me.dndOver = false; me.elem.removeClass(prefix + 'over'); return false; }, // 如果传入 callback 则去查看文件夹,否则只管当前文件夹。 _getTansferFiles: function (e, callback) { var results = [], promises = [], items, files, dataTransfer, file, item, i, len, canAccessFolder; e = e.originalEvent || e; dataTransfer = e.dataTransfer; items = dataTransfer.items; files = dataTransfer.files; canAccessFolder = !!(items && items[0].webkitGetAsEntry); for (i = 0, len = files.length; i < len; i++) { file = files[i]; item = items && items[i]; if (canAccessFolder && item.webkitGetAsEntry().isDirectory) { promises.push(this._traverseDirectoryTree( item.webkitGetAsEntry(), results)); } else { results.push(file); } } Base.when.apply(Base, promises).done(function () { if (!results.length) { return; } callback(results); }); }, _traverseDirectoryTree: function (entry, results) { var deferred = Base.Deferred(), me = this; if (entry.isFile) { entry.file(function (file) { results.push(file); deferred.resolve(); }); } else if (entry.isDirectory) { entry.createReader().readEntries(function (entries) { var len = entries.length, promises = [], arr = [], // 为了保证顺序。 i; for (i = 0; i < len; i++) { promises.push(me._traverseDirectoryTree( entries[i], arr)); } Base.when.apply(Base, promises).then(function () { results.push.apply(results, arr); deferred.resolve(); }, deferred.reject); }); } return deferred.promise(); }, destroy: function () { var elem = this.elem; elem.off('dragenter', this.dragEnterHandler); elem.off('dragover', this.dragEnterHandler); elem.off('dragleave', this.dragLeaveHandler); elem.off('drop', this.dropHandler); if (this.options.disableGlobalDnd) { $(document).off('dragover', this.dragOverHandler); $(document).off('drop', this.dropHandler); } } }); }); /** * @fileOverview FilePaste */ define('runtime/html5/filepaste', [ 'base', 'runtime/html5/runtime', 'lib/file' ], function (Base, Html5Runtime, File) { return Html5Runtime.register('FilePaste', { init: function () { var opts = this.options, elem = this.elem = opts.container, accept = '.*', arr, i, len, item; // accetp的mimeTypes中生成匹配正则。 if (opts.accept) { arr = []; for (i = 0, len = opts.accept.length; i < len; i++) { item = opts.accept[i].mimeTypes; item && arr.push(item); } if (arr.length) { accept = arr.join(','); accept = accept.replace(/,/g, '|').replace(/\*/g, '.*'); } } this.accept = accept = new RegExp(accept, 'i'); this.hander = Base.bindFn(this._pasteHander, this); elem.on('paste', this.hander); }, _pasteHander: function (e) { var allowed = [], ruid = this.getRuid(), items, item, blob, i, len; e = e.originalEvent || e; items = e.clipboardData.items; for (i = 0, len = items.length; i < len; i++) { item = items[i]; if (item.kind !== 'file' || !(blob = item.getAsFile())) { continue; } allowed.push(new File(ruid, blob)); } if (allowed.length) { // 不阻止非文件粘贴(文字粘贴)的事件冒泡 e.preventDefault(); e.stopPropagation(); this.trigger('paste', allowed); } }, destroy: function () { this.elem.off('paste', this.hander); } }); }); /** * @fileOverview FilePicker */ define('runtime/html5/filepicker', [ 'base', 'runtime/html5/runtime' ], function (Base, Html5Runtime) { var $ = Base.$; return Html5Runtime.register('FilePicker', { init: function () { var container = this.getRuntime().getContainer(), me = this, owner = me.owner, opts = me.options, lable = $(document.createElement('label')), input = $(document.createElement('input')), arr, i, len, mouseHandler; input.attr('type', 'file'); input.attr('name', opts.name); input.addClass('webuploader-element-invisible'); lable.on('click', function () { input.trigger('click'); }); lable.css({ opacity: 0, width: '100%', height: '100%', display: 'block', cursor: 'pointer', background: '#ffffff' }); if (opts.multiple) { input.attr('multiple', 'multiple'); } // @todo Firefox不支持单独指定后缀 if (opts.accept && opts.accept.length > 0) { arr = []; for (i = 0, len = opts.accept.length; i < len; i++) { arr.push(opts.accept[i].mimeTypes); } input.attr('accept', arr.join(',')); } container.append(input); container.append(lable); mouseHandler = function (e) { owner.trigger(e.type); }; input.on('change', function (e) { var fn = arguments.callee, clone; me.files = e.target.files; // reset input clone = this.cloneNode(true); this.parentNode.replaceChild(clone, this); input.off(); input = $(clone).on('change', fn) .on('mouseenter mouseleave', mouseHandler); owner.trigger('change'); }); lable.on('mouseenter mouseleave', mouseHandler); }, getFiles: function () { return this.files; }, destroy: function () { // todo } }); }); /** * @fileOverview Transport * @todo 支持chunked传输,优势: * 可以将大文件分成小块,挨个传输,可以提高大文件成功率,当失败的时候,也只需要重传那小部分, * 而不需要重头再传一次。另外断点续传也需要用chunked方式。 */ define('runtime/html5/transport', [ 'base', 'runtime/html5/runtime' ], function (Base, Html5Runtime) { var noop = Base.noop, $ = Base.$; return Html5Runtime.register('Transport', { init: function () { this._status = 0; this._response = null; }, send: function () { var owner = this.owner, opts = this.options, xhr = this._initAjax(), blob = owner._blob, server = opts.server, formData, binary, fr; if (opts.sendAsBinary) { server += (/\?/.test(server) ? '&' : '?') + $.param(owner._formData); binary = blob.getSource(); } else { formData = new FormData(); $.each(owner._formData, function (k, v) { formData.append(k, v); }); formData.append(opts.fileVal, blob.getSource(), opts.filename || owner._formData.name || ''); } if (opts.withCredentials && 'withCredentials' in xhr) { xhr.open(opts.method, server, true); xhr.withCredentials = true; } else { xhr.open(opts.method, server); } this._setRequestHeader(xhr, opts.headers); if (binary) { xhr.overrideMimeType('application/octet-stream'); // android直接发送blob会导致服务端接收到的是空文件。 // bug详情。 // https://code.google.com/p/android/issues/detail?id=39882 // 所以先用fileReader读取出来再通过arraybuffer的方式发送。 if (Base.os.android) { fr = new FileReader(); fr.onload = function () { xhr.send(this.result); fr = fr.onload = null; }; fr.readAsArrayBuffer(binary); } else { xhr.send(binary); } } else { xhr.send(formData); } }, getResponse: function () { return this._response; }, getResponseAsJson: function () { return this._parseJson(this._response); }, getStatus: function () { return this._status; }, abort: function () { var xhr = this._xhr; if (xhr) { xhr.upload.onprogress = noop; xhr.onreadystatechange = noop; xhr.abort(); this._xhr = xhr = null; } }, destroy: function () { this.abort(); }, _initAjax: function () { var me = this, xhr = new XMLHttpRequest(), opts = this.options; if (opts.withCredentials && !('withCredentials' in xhr) && typeof XDomainRequest !== 'undefined') { xhr = new XDomainRequest(); } xhr.upload.onprogress = function (e) { var percentage = 0; if (e.lengthComputable) { percentage = e.loaded / e.total; } return me.trigger('progress', percentage); }; xhr.onreadystatechange = function () { if (xhr.readyState !== 4) { return; } xhr.upload.onprogress = noop; xhr.onreadystatechange = noop; me._xhr = null; me._status = xhr.status; if (xhr.status >= 200 && xhr.status < 300) { me._response = xhr.responseText; return me.trigger('load'); } else if (xhr.status >= 500 && xhr.status < 600) { me._response = xhr.responseText; return me.trigger('error', 'server'); } return me.trigger('error', me._status ? 'http' : 'abort'); }; me._xhr = xhr; return xhr; }, _setRequestHeader: function (xhr, headers) { $.each(headers, function (key, val) { xhr.setRequestHeader(key, val); }); }, _parseJson: function (str) { var json; try { json = JSON.parse(str); } catch (ex) { json = {}; } return json; } }); }); /** * @fileOverview FlashRuntime */ define('runtime/flash/runtime', [ 'base', 'runtime/runtime', 'runtime/compbase' ], function (Base, Runtime, CompBase) { var $ = Base.$, type = 'flash', components = {}; function getFlashVersion() { var version; try { version = navigator.plugins['Shockwave Flash']; version = version.description; } catch (ex) { try { version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash') .GetVariable('$version'); } catch (ex2) { version = '0.0'; } } version = version.match(/\d+/g); return parseFloat(version[0] + '.' + version[1], 10); } function FlashRuntime() { var pool = {}, clients = {}, destory = this.destory, me = this, jsreciver = Base.guid('webuploader_'); Runtime.apply(me, arguments); me.type = type; // 这个方法的调用者,实际上是RuntimeClient me.exec = function (comp, fn/*, args...*/) { var client = this, uid = client.uid, args = Base.slice(arguments, 2), instance; clients[uid] = client; if (components[comp]) { if (!pool[uid]) { pool[uid] = new components[comp](client, me); } instance = pool[uid]; if (instance[fn]) { return instance[fn].apply(instance, args); } } return me.flashExec.apply(client, arguments); }; function handler(evt, obj) { var type = evt.type || evt, parts, uid; parts = type.split('::'); uid = parts[0]; type = parts[1]; // console.log.apply( console, arguments ); if (type === 'Ready' && uid === me.uid) { me.trigger('ready'); } else if (clients[uid]) { clients[uid].trigger(type.toLowerCase(), evt, obj); } // Base.log( evt, obj ); } // flash的接受器。 window[jsreciver] = function () { var args = arguments; // 为了能捕获得到。 setTimeout(function () { handler.apply(null, args); }, 1); }; this.jsreciver = jsreciver; this.destory = function () { // @todo 删除池子中的所有实例 return destory && destory.apply(this, arguments); }; this.flashExec = function (comp, fn) { var flash = me.getFlash(), args = Base.slice(arguments, 2); return flash.exec(this.uid, comp, fn, args); }; // @todo } Base.inherits(Runtime, { constructor: FlashRuntime, init: function () { var container = this.getContainer(), opts = this.options, html; // if not the minimal height, shims are not initialized // in older browsers (e.g FF3.6, IE6,7,8, Safari 4.0,5.0, etc) container.css({ position: 'absolute', top: '-8px', left: '-8px', width: '9px', height: '9px', overflow: 'hidden' }); // insert flash object html = '' + '' + '' + '' + ''; container.html(html); }, getFlash: function () { if (this._flash) { return this._flash; } this._flash = $('#' + this.uid).get(0); return this._flash; } }); FlashRuntime.register = function (name, component) { component = components[name] = Base.inherits(CompBase, $.extend({ // @todo fix this later flashExec: function () { var owner = this.owner, runtime = this.getRuntime(); return runtime.flashExec.apply(owner, arguments); } }, component)); return component; }; if (getFlashVersion() >= 11.4) { Runtime.addRuntime(type, FlashRuntime); } return FlashRuntime; }); /** * @fileOverview FilePicker */ define('runtime/flash/filepicker', [ 'base', 'runtime/flash/runtime' ], function (Base, FlashRuntime) { var $ = Base.$; return FlashRuntime.register('FilePicker', { init: function (opts) { var copy = $.extend({}, opts), len, i; // 修复Flash再没有设置title的情况下无法弹出flash文件选择框的bug. len = copy.accept && copy.accept.length; for (i = 0; i < len; i++) { if (!copy.accept[i].title) { copy.accept[i].title = 'Files'; } } delete copy.button; delete copy.container; this.flashExec('FilePicker', 'init', copy); }, destroy: function () { // todo } }); }); /** * @fileOverview Transport flash实现 */ define('runtime/flash/transport', [ 'base', 'runtime/flash/runtime', 'runtime/client' ], function (Base, FlashRuntime, RuntimeClient) { var $ = Base.$; return FlashRuntime.register('Transport', { init: function () { this._status = 0; this._response = null; this._responseJson = null; }, send: function () { var owner = this.owner, opts = this.options, xhr = this._initAjax(), blob = owner._blob, server = opts.server, binary; xhr.connectRuntime(blob.ruid); if (opts.sendAsBinary) { server += (/\?/.test(server) ? '&' : '?') + $.param(owner._formData); binary = blob.uid; } else { $.each(owner._formData, function (k, v) { xhr.exec('append', k, v); }); xhr.exec('appendBlob', opts.fileVal, blob.uid, opts.filename || owner._formData.name || ''); } this._setRequestHeader(xhr, opts.headers); xhr.exec('send', { method: opts.method, url: server }, binary); }, getStatus: function () { return this._status; }, getResponse: function () { return this._response; }, getResponseAsJson: function () { return this._responseJson; }, abort: function () { var xhr = this._xhr; if (xhr) { xhr.exec('abort'); xhr.destroy(); this._xhr = xhr = null; } }, destroy: function () { this.abort(); }, _initAjax: function () { var me = this, xhr = new RuntimeClient('XMLHttpRequest'); xhr.on('uploadprogress progress', function (e) { return me.trigger('progress', e.loaded / e.total); }); xhr.on('load', function () { var status = xhr.exec('getStatus'), err = ''; xhr.off(); me._xhr = null; if (status >= 200 && status < 300) { me._response = xhr.exec('getResponse'); me._responseJson = xhr.exec('getResponseAsJson'); } else if (status >= 500 && status < 600) { me._response = xhr.exec('getResponse'); me._responseJson = xhr.exec('getResponseAsJson'); err = 'server'; } else { err = 'http'; } xhr.destroy(); xhr = null; return err ? me.trigger('error', err) : me.trigger('load'); }); xhr.on('error', function () { xhr.off(); me._xhr = null; me.trigger('error', 'http'); }); me._xhr = xhr; return xhr; }, _setRequestHeader: function (xhr, headers) { $.each(headers, function (key, val) { xhr.exec('setRequestHeader', key, val); }); } }); }); /** * @fileOverview 没有图像处理的版本。 */ define('preset/withoutimage', [ 'base', // widgets 'widgets/filednd', 'widgets/filepaste', 'widgets/filepicker', 'widgets/queue', 'widgets/runtime', 'widgets/upload', 'widgets/validator', // runtimes // html5 'runtime/html5/blob', 'runtime/html5/dnd', 'runtime/html5/filepaste', 'runtime/html5/filepicker', 'runtime/html5/transport', // flash 'runtime/flash/filepicker', 'runtime/flash/transport' ], function (Base) { return Base; }); define('webuploader', [ 'preset/withoutimage' ], function (preset) { return preset; }); return require('webuploader'); });