回顾

　　由于工作内容比较多，特别是架构方面，需要耗费很多的时间调整、重构，因此很久没有写文章了。

　　话就不多说了，直接进入主题。

实现

　　首先分析一下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组件就到这里了，谢谢各位，如果还有其他的问题，欢迎留言。