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 插件的使用方法，应该和这个差不多，自己是个小菜，正在研究，欢迎大神指正；

写的不是很清楚，后续在总结；

posted @ 2016-04-25 16:09  一步小僧  阅读(16111)  评论(4)  编辑  收藏  举报
一步小僧哈哈