uploadifive源码学习
一、简介
Uploadify是一个基于JQuery的多文件上传JS组件，高度定制，两个版本可供选择。flash版本在最新的Safari等不再支持flash的浏览器或者一些手机浏览器中就无法正常的加载使用，因此推荐使用html5版本！
最近，想了解JavaScript的编码规范，所以根据用过的Uploadifive作为参考，看如何组织js代码以及如果开发jquery的扩展。
二、代码结构概览
如果从第一行开始读代码，会摸不着头脑，所以先看一下他的整体布局。
(function($) {
var methods = {
//所有上传用到的方法和属性
init:function(options){},
debug : function() {},
clearQueue : function() {}//清理队列
cancel : fucntion(file, fast){},//取消文件上传
upload : function(file, keepVars) {}，
destroy : function() {}，
}
$.fn.uploadifive = function(method) {
if (methods[method]) {
return methods[method].apply(this,Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('The method ' + method + ' does not exist in $.uploadify');
}
}
})(jQuery);
知识点：
1.$.extend为类级别的扩展，如：
//扩展
$.extend({
req:function(url){return true}
})
//使用
$.req('xxxx')
2.$.fn.extend为对象级别的扩展，如：
//扩展
$.fn.extend({
validate:function(){return true}
})
//使用
$("#id").validate();
3.call与apply通常用于动态改变this,调用其他对象的方法，区别在于call参数逐个传递，apply将所有参数放入数组(arguments)行传递
三、解析
1.首先扩展中对传入的method参数进行判断，如果存在这个方法就直接调用相应的methods对象中的方法，否则如果是个对象，就调用methods的init初始化方法。
2.init 方法
var $this = $(this);//当前被绑定的input的context object
$this.data('uploadifive', {
// 这里初始化的是文件上传队列、多文件上传、文件数量等记录用的
//属性
});
//暂存uploadifive 并保存在$data中
var $data = $this.data('uploadifive');
//将用户绑定上传组件传入的参数与默认的参数进行合并
var settings = $data.settings = $.extend({},options);
//计算用户传入的配置参数fileSizeLimit
if (isNaN(settings.fileSizeLimit)) {
//如果有kb等单位，这里根据用户输入的是KB MB GB进行文件大小计算
} else {
//否则以kb为单位
settings.fileSizeLimit = settings.fileSizeLimit * 1024;
}
//创建type为file的input模板保存为$data的一个属性，这个模板会在后面取代用户页面原有的input 作为一个可点击的透明层存在
$data.inputTemplate = $('<input type="file">')
.css({
'font-size' : settings.height + 'px',
'opacity' : 0,
'position' : 'absolute',
'right' : '-3px',
'top' : '-3px',
'z-index' : 999
});
//接下来初始化一系列方法绑定到$data上
//创建一个新的input 会用到上面的inputTemplate
$data.createInput = function(){...}
//清除一input
$data.destroyInput = function(){...}
//拖动上传方法
$data.drop = function(e) {...}
//检查文件在队列中是否存在方法
$data.fileExistsInQueue = function(file) {...}
//删除队列中一个已经存在文件
$data.removeExistingFile = function(file) {...}
//接下来初始化创建itemTemplate模板，这个模板就是开始上传时，会有一个进度 条以及一个x点击取消按钮，保存至$data.queueItem中
if (settings.itemTemplate == false) {
$data.queueItem = $('模板div代码');
} else {
$data.queueItem = $(settings.itemTemplate);
}
//添加文件到文件队列中的方法初始化
$data.addQueueItem = function(file) {...}
//上传队列中移除其中一个,多文件上传时候用到
$data.removeQueueItem = function(file, instant, delay) {...}
//计算待上传文件的数量方法
$data.filesToUpload = function() {...}
//检查文件是否存在的方法
$data.checkExists = function(file){...}
//真正实现文件流上传的方法
$data.uploadFile = function(file, uploadAll) {...}
//更新文件上传进度的方法
$data.progress = function(e, file) {...}
//错误信息触发
$data.error = function(errorType, file, uploadAll) {}
//文件上传完成后触发的方法
$data.uploadComplete = function(e, file, uploadAll) {}
//全部文件上传完成触发的方法
$data.queueComplete = function() {}
截止到现在，上面的代码都是方法的定义，模板的定义全部保存在$data中，页面中还没有任何的效果，接下来开始执行一些列跟页面文件上传展现相关初始化操作。
//判断是否支持HTML5
if (window.File && window.FileList && window.Blob && (window.FileReader || window.FormData)) {
下面这部分的操作就是创建一个按钮，设置基本的按钮的样式，如果用户传入了自定 义的设置参数，则相应的赋值。按钮其实是在透明的input file上的一个div
settings.id = 'uploadifive-' + $this.attr('id');
// Wrap the file input in a div with overflow set to hidden
$data.button = $('<div id="' + settings.id + '" class="uploadifive-button">' + settings.buttonText + '</div>');
if (settings.buttonClass) $data.button.addClass(settings.buttonClass);
// Style the button wrapper
$data.button.css({
'height' : settings.height,
'line-height' : settings.height + 'px',
'overflow' : 'hidden',
'position' : 'relative',
'text-align' : 'center',
'width' : settings.width
});
// Insert the button above the file input
$this.before($data.button)
// Add the file input to the button
.appendTo($data.button) //将原有的input type=file 插入到div中并display none
// Modify the styles of the file input
.hide();
}
到现在按钮可以显示在页面上了，但是上传的操作还没有初始化、绑定。接下来调用上面已经初始化好的createInput方法，创建一个新的input type file以便添加用户的一些配置信息，如允许的文件类型，是否多文件上传等。
$data.createInput.call($this);
createInput方法内容：
$data.createInput = function() {
//获取之前初始化好的保存在$data中的input type file模板
var input = $data.inputTemplate.clone();
//设置input name multip accept等属性
...
//对创建的input绑定change事件
input.bind('change', function() {
//初始化队列记录参数
...
//判断是否超过了设置的上传队列数量限制，超过了则回调报错，否则进行添加入队列处理
if(超过了限制){
onError();
}else{
//遍历files逐个添加到上传队列
for (var n = 0; n < limit; n++) {
file = this.files[n];
$data.addQueueItem(file);
}
$data.inputs[inputName] = this;
$data.createInput();//重新创建input并绑定change事件
}
}
//将绑定好事件的input插入到之前创建的button 就是div层里面
$data.button.append(input);
}
然后代码回到$data.createInput.call($this);的调用位置接着往下走，可以看到有一个是否设置了queueID的判断，就是如果设置了queueID就直接创建一个div容器，这里面就是上传时，上传状态进度等信息出现的地方，如果没有，则默认在上传按钮下面创建一个有默认id和class的容器，暂时保存在$data.queueEl中。
if (!settings.queueID) {
settings.queueID = settings.id + '-queue';
$data.queueEl = $('<div id="' + settings.queueID + '" class="uploadifive-queue" />');
$data.button.after($data.queueEl);
} else {
$data.queueEl = $('#' + settings.queueID);
}
uploadifive还支持拖动上传，下面的代码是绑定拖动上传的监听事件
if (settings.dnd) {
//dragleave
//dragenter
//dragover
//drop
}
初始化操作已经完成，等待上传的触发！
当点击选择图片->选择一个文件->确定上传，则触发了createInput中绑定的change事件，这里是一个过渡，只是做了队列文件数量的验证，然后遍历文件对象调用$data.addQueueItem(file).
addQueueItem，添加file对象到队列中，事实上多文件上传是html5支持的，所以并不是uploadifive的特性。这个方法完成的事情包括：
- 判断队列中是否有重复文件，有则移除重复
- 创建上传进度信息显示，并绑定取消上传的点击事件
- file.queueItem.data('file', file); 暂存文件流，在后面真正的文件上传时候要获取文件流
if(onAddQueueItem方法 没有被覆盖){
完成上面所述的1,2,3操作
}
//如果用户绑定时有onAddQueueItem则触发回调
...
//文件大小判断
...
执行完暂存的加入队列的操作，回到createInput的绑定change事件内继续执行,如果配置了自动上传，调用upload方法。
if (settings.auto) {
methods.upload.call($this);
}
下面进入upload方法。upload方法首先拿到所有uploadifive的配置信息，然后判断是否直接传入了file文件流，是则调用真正的上传方法uploadFile
if (file) {
$data.uploadFile.call($this, file);
} else {
if(没有超过上传文件文件数量限制){
//循环上传队列中没有错误和没有完成的文件
$('#' + settings.queueID).find('.uploadifive-queue-item').not('.error, .complete').each(function() {
/**
* $(this)代表的是当前的上传队列的对象，而在addQueeuItem中 有
* 这样一句 file.queueItem.data('file', file);就是缓存了数据
* 所以这里可以直接访问到暂存数据
*/
_file = $(this).data('file');
// Check if the simUpload limit was reached
//是否配置有重复文件检查脚本链接checkScript参数，则check,否则调用真正的uploadFile方法
if (settings.checkScript) {
_file.checking = true;
skipFile = $data.checkExists(_file);
_file.checking = false;
if (!skipFile) {
$data.uploadFile(_file, true);
}
} else {
$data.uploadFile(_file, true);
}
});
if (队列中文件都上传完成) {
$data.queueComplete();
}
}
}
uploadFile中使用了两种上传方式，如果支持FormData则使用异步的ajax方式上传，否则使用FileReader以二进制流的方式上传。这种文件上传的方式还是值得学习一下的。
//创建XMLHttpRequest对象
xhr = file.xhr = new XMLHttpRequest();
if(支持FormData){
//创建表单
xhr.open(settings.method, settings.uploadScript, true);
// On progress function
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
//调用progress方法，progress方法就是计算上传完成百分比
$data.progress(e, file);
}
}, false);
}else{
//以二进制流方法上传
var reader = new FileReader();
...
}
最后上传完成调用queueComplete方法，整个流程走完了。
四、总结
简化版的执行流程是：
绑定input，定制参数->初始化上传方法、属性->createInput创建上传按钮->绑定change事件->文件上传触发change->文件天加到队列调用addQueueItem->上传调用upload->upload必要验证后调用真正的上传方法uploadFile->上传过程中调用progress计算进度->上传完成调用queueComplete方法.
附粗陋流程图：
