回顾
由于工作内容比较多，特别是架构方面，需要耗费很多的时间调整、重构，因此很久没有写文章了。
话就不多说了，直接进入主题。
实现
首先分析一下SWFUpload初始化的时候，需要传入当前触发上传的元素，正好定义directive时，link方法的第二参数就是dom元素对象，只是这个对象是angular.element，因此在不需要考虑其他的因素的情况下，我们先简单实现一个可以用的，然后再一步步加深，代码如下：
//angularjs
ahl.directive('ucUpload', [
function () {
return function (scope, el, attrs) {
new SWFUpload({
upload_url: attrs.url,
file_post_name: attrs.postName || 'file',
file_size_limit: attrs.limitSize || '2mb',
file_types: '*.png',
file_types_description: attrs.desc || '文件',
button_placeholder: el[0],
button_width: el[0].offsetWidth,
button_height: el[0].offsetHeight,
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
flash_url: '/swfupload.swf',
debug: false,
prevent_swf_caching: true
});
};
}
]);
//html
<div url="/file/uploadForShopLogo" uc-upload></div>
由于实现的是最简单的版本，页面上绑定的元素能够触发上传文件的窗口，如果想要进一步要求文件的类型，那么可以扩展attrs，增加相应的支持。
但是在真实的应用环境中，如果不是通用组件，那么组件是根据业务提取的，因此所支持的类型一般是固定的，于是只需要在代码内部增加常量来代表相应的类型，而组件只需要提供类型就可以了，代码修改如下：
//angular
var TPYE = {
image: '*.jpg;*.jpeg;*.gif;*.png'
};
//其他代码
return function (scope, el, attrs) {
new SWFUpload({
//其他代码
file_types: TYPES[attrs.type]
});
};
//html
<div type="image" url="/file/uploadForShopLogo" uc-upload></div>
接下来，开始实现上传过程当中的几个事件，基本上会用到的有如下几个：file_queued_handler、file_queue_error_handler、upload_progress_handler、upload_success_handler，事件的具体作用我就不多说了。
只要在指令中定义几个属性与以上事件对应就行，由于file_queued_handler和file_queue_error_handler相似，只要一个事件，第一个参数用error来区分以上2个方法就可以了，代码如下：
//angular
var QUEUE_ERROR = {};
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT] = '文件超过限制大小';
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE] = '不允许上传空文件';
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.INVALID_FILETYPE] = '不支持上传此格式的文件';
QUEUE_ERROR[SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED] = '超过最大可上传数量';
return {
scope: {
//文件上传过程中
progress: '&',
//文件加入队列时
queued: '&',
//文件上传成功
success: '&'
},
link: function (scope, el, attrs) {
var swf;
var opts = {
upload_url: attrs.url,
file_post_name: attrs.postName || 'file',
file_size_limit: attrs.limitSize || '2mb',
file_types: TPYES[attrs.type],
file_types_description: attrs.desc || '文件',
button_placeholder: el[0],
button_width: el[0].offsetWidth,
button_height: el[0].offsetHeight,
button_cursor: SWFUpload.CURSOR.HAND,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
flash_url: '/swfupload.swf',
debug: false,
prevent_swf_caching: true
};
if (attrs.limitQueueSize)
opts.file_queue_limit = parseInt(attrs.limitQueueSize);
if (attrs.queued) {
var queued = scope.queued();
opts.file_queued_handler = function (file) {
queued(null, file);
swf.startUpload();
};
opts.file_queue_error_handler = function (file, errno) {
queued(QUEUE_ERROR[errno], file);
};
}
if (attrs.progress) {
var progress = scope.progress();
opts.upload_progress_handler = function (file, currentSize, totalSize) {
progress({
file: file,
currentSize: currentSize,
totalSize: totalSize
});
};
}
if (attrs.success) {
var success = scope.success();
opts.upload_success_handler = function (file, json) {
var res = JSON.parse(json);
res.file = file;
success(res);
}
}
swf = new SWFUpload(opts);
}
};
//html
<div queued="onQueued" url="/file/uploadForShopLogo" uc-upload></div>
组件使用的过程当中，可能不需要进度、也可能不需要其他的事件，因此编写组件的时候，可以灵活点，多增加一些判断以防某些特殊的情况。
如果上传时，需要参数支持，只需要利用scope.$watch监听对应属性的变化，如果属性有效，则直接使用swf.setPostParams进行参数设置即可，这里就不给出相应的代码了。
结尾
这次分享的基于SWFUpload的angular组件就到这里了，谢谢各位，如果还有其他的问题，欢迎留言。