之前由于项目需要，决定使用angularjs做前端开发，在前两个项目中都有文件上传的功能，因为是刚接触angularjs，所以对一些模块和模块间的依赖不是很了解。都是由其他大神搭好框架，我只做些简单的填充。
现在拿出些时间来研究一下。主要针对一些插件的用法，现总结一下（以file upload 为例）：
angular file upload.js 的第一行是
var angularFileUpload = angular.module('angularFileUpload', []);
这里他定义了一个angular模块，名称是angularFileUpload，不依赖其他模块；
接下来
angularFileUpload.service('$upload', ['$http', '$timeout', function($http, $timeout) {...})
在这个模块上创建了一个服务，名称是$upload，依赖'$http', '$timeout'两个内置模块（方法函数）；
在这个模块的内部使用directive，创建了一些指令方法：
angularFileUpload.directive('ngFileSelect',[])//选择
angularFileUpload.directive('ngFileDrop',[]);//拖放
等方法，具体还没有研究过；
分析完这个插件，接下来就是使用该插件了；
首先引入angularjs库文件和相应插件
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-file-upload/1.3.1/angular-file-upload.min.js"></script>
下面demo
<body ng-app="appName">
<div ng-controller="ctrlName">
<div class="container">
<input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">
</div>
</div>
关键是js的控制
//注入angularjs 模块和服务 var app = angular.module('appName', ['angularFileUpload']);//创建并添加依赖（upload模块名称） app.controller('ctrlName',[ '$scope', '$upload', function($scope, $upload) {//$upload是依赖的upload模块的服务名称module.service("$upload",[]）;
//这里可以调用依赖的(upload)模块里提供的方法
$scope.onFileSelect = function($files) { //$files:是已选文件的名称、大小和类型的数组 for (var i = 0; i < $files.length; i++) { var file = $files[i]; console.log(file); /*文件上传函数*/ $scope.upload = $upload.upload({ url: 'server/upload/url', //上传的url //method: 'POST' or 'PUT', //headers: {'header-key': 'header-value'}, //withCredentials: true, data: {myObj: $scope.myModelObj}, file: file, // or list of files ($files) for html5 only //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s) // customize file formData name ('Content-Disposition'), server side file variable name. //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file' // customize how data is added to formData. See #40#issuecomment-28612000 for sample code //formDataAppender: function(formData, key, val){} }).progress(function(evt) {//上传进度 console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).success(function(data, status, headers, config) { // 文件上传成功处理函数 console.log(data); }).error(function(data, status, headers, config) { //失败处理函数 console.log('上传失败'); }); }; }; }]);
其他angularjs 插件的使用方法，应该和这个差不多，自己是个小菜，正在研究，欢迎大神指正；
写的不是很清楚，后续在总结；