基于SWFUpload的angular上传组件

回顾

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

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

实现

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