angularjs结合plupload实现文件上传

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

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

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

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)294052929@qq.com