angularjs file upload插件使用总结

之前由于项目需要,决定使用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 插件的使用方法,应该和这个差不多,自己是个小菜,正在研究,欢迎大神指正;

写的不是很清楚,后续在总结;

上一篇:JQuery上传插件uploadify优化


下一篇:面向对象 OOP中的抽象类,接口以及多态