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