angularjs结合plupload实现文件上传

转载注明：（罗志强的博客）

angularjs的指令directive非常好使，可以很方便的结合各种插件，实现很强大的功能。 今天用到了plupload，就拿它举例吧。

正常的plupload用法应该是这样的

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : 'pickfiles',
    url : "/examples/upload",
});
uploader.init();

而在Angular里面，直接这么写，似乎不太优美，也不符合封装成组件的要求。 那么我们就给plupload做成angular的指令(web组件)。

这里需要注意的是，不要将初始化操作放到Controller里面，否则它可能出错，很多封装其他插件成angular组件时，就是因为初始化顺序问题，导致各种报错。controller的执行在link之前。

var app = angular.module('plupload', []);
/**
 * 文件上传指令
 * @return {[type]}           [description]
 */
app.directive('plupload', ['$timeout', function($timeout) {
    return {
        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        link: function($scope, iElm, iAttrs, controller) {
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'uploadfile',
                url: 'upload.php',
                multi_selection: false,
                filters: {
                    max_file_size: '10mb',
                    mime_types: [{
                        title: "Image files",
                        extensions: "jpg,gif,png"
                    }, {
                        title: "Zip files",
                        extensions: "zip"
                    }]
                },
                flash_swf_url: '/plupload/Moxie.swf',
                silverlight_xap_url: '/plupload/Moxie.xap',
                init: {
                    FilesAdded: function(up, files) {
                        uploader.start();
                    },
                    UploadComplete: function(up, files) {
                    }
                }
            });
            uploader.init();
        }
    };
}]);

这样上传插件就算封装完成了。使用的时候，就先引入模块文件，然后引入模块

var app = angular.module('app', [
    'plupload'
]);

使用的时候像下面这样。

<button class="btn btn-primary btn-sm" id="uploadfile" plupload>本地上传</button>

如果在 模块app的作用域下， plupload指令就会生效了。

上面代码是从项目里面拿出来修改的，没有经过测验。方便借鉴，如果有什么疑问，联系：(fermi)[e-mail]