AngularJS图片上传功能的实现

页面导航:首页 > 网络编程 > JavaScript > AngularJS图片上传功能的实现

AngularJS图片上传功能的实现

来源: 作者: 时间:2016-02-01 09:32 【

一、前言前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传的功能,当时查阅文档(都是英文文档)折腾了很久才弄出来,现将整个流程整理出来,有需要的朋友可以参考
一、前言
 
前一段时间做项目时,遇到一个问题就是AngularJS实现图片预览和上传的功能,当时查阅文档(都是英文文档)折腾了很久才弄出来,现将整个流程整理出来,有需要的朋友可以参考一下,如果您有更好的方法,欢迎留言交流~~话不多说直接看实现。
 
二、具体实现
 
1、html标签结构
 
<input type="file" file-model="myFile"/>
<div class="col-md-12">
    <img ng-src="{{imageSrc}}" style="max-width:300px;max-height:300px;margin:0 auto;display:block;" />
</div>
input文件上传标签,div包裹的img标签为图片预览区域
 
2、定义directive
 
 
         angular.module('app')
            .directive('fileModel', ['$parse', function ($parse) {
                return {
                    restrict: 'A',
                    link: function(scope, element, attrs, ngModel) {
                        var model = $parse(attrs.fileModel);
                        var modelSetter = model.assign;
                        element.bind('change', function(event){
                            scope.$apply(function(){
                                modelSetter(scope, element[0].files[0]);
                            });
                            //附件预览
                                 scope.file = (event.srcElement || event.target).files[0];
                            scope.getFile();
                        });
                    }
                };
            }]);

 

 
input标签中的属性file-model即就是Angular中的指令,在上面代码的link方法中,我们为指令file-model所在的元素绑定了change事件,change方法中获取到要上传的文件对象,并调用了controller中的getFile()方法(详见controller)
 
3、定义控制器UploaderControler
 
复制代码
         angular.module('app')
            .controller('UploaderController', function($scope, fileReader){
                $scope.getFile = function () {
                    fileReader.readAsDataUrl($scope.file, $scope)
                                  .then(function(result) {
                                      $scope.imageSrc = result;
                                  });
                };
            })
复制代码
控制器中定义了一个UploaderController,该控制器在其作用域中定义了getFile()方法,getFile方法中调用了fileReader service中的readAsDataUrl方法,此方法中生成了图片的地址url,并将结果返回getFile中,将返回的url赋值给$scope.imageSrc ,根据Angular双向数据绑定的机制,img元素中ng-src属性值为url,那么就可以在页面上预览图片了。fileReader service是如何定义的呢?
 
4、定义service fileReader
 
 
       angular.module('app')
            .factory('fileReader', ["$q", "$log", function($q, $log){
                var onLoad = function(reader, deferred, scope) {
                    return function () {
                        scope.$apply(function () {
                            deferred.resolve(reader.result);
                        });
                    };
                };
         
                var onError = function (reader, deferred, scope) {
                    return function () {
                        scope.$apply(function () {
                            deferred.reject(reader.result);
                        });
                    };
                };
         
                var getReader = function(deferred, scope) {
                    var reader = new FileReader();
                    reader.onload = onLoad(reader, deferred, scope);
                    reader.onerror = onError(reader, deferred, scope);
                    return reader;
                };
         
                var readAsDataURL = function (file, scope) {
                    var deferred = $q.defer();
                    var reader = getReader(deferred, scope);         
                    reader.readAsDataURL(file);
                    return deferred.promise;
                };
         
                return {
                    readAsDataUrl: readAsDataURL  
                };
            }])

 

fileReader service主要是完成生成获取到的文件的url地址,返回到view进行预览。
 
5、附件上传的实现
 
附件上传主要是将页面表单数据通过后台提供的接口写入到中,具体实现在控制器UploaderControler中增加如下代码:
 
 // 组装表单数据
                var postData = {
                    vacationType: $scope.leave.type,
                    reason: $scope.leave.reason,
                    familyRelation: +$scope.leave.type == 7 ? $scope.leave.relation : "",
                    startTime: startTime,
                    endTime: endTime,
                    fileName: $scope.imageSrc,
                    workDelivers: workDelivers,
                    ccmailNickNames: sendPersons,
                    realDays: +$scope.leave.type == 8 ? $scope.leave.timeLong : ""
                };

                var promise = postMultipart('/maldives/leave/save', postData); 

                function postMultipart(url, data) {
                    var fd = new FormData();
                    angular.forEach(data, function(val, key) {
                        fd.append(key, val);
                    });
                    var args = {
                        method: 'POST',
                        url: url,
                        data: fd,
                        headers: {'Content-Type': undefined},
                        transformRequest: angular.identity
                    };
                    return $http(args);
                }

 

             
 
postData为表单中的数据(包括上传的图片信息),'/maldives/leave/save'表示的是请求后台的数据接口,$http是Angular内置的service,能向后台发送GET或POST请求。
 
三、对Angular中service、controller、directive的认识和理解
 
Service就是单例对象在AngluarJS 中的一个别名。这些单例对象会被经常传来传去,保证你每次访问到的都是同一个实例。基于这种思想,单例对象让我们可以实现一些相当酷的功能,它可以让很多controller和directive访问其内部的数值。
 
controller把service、依赖关系、以及其它对象串联到一起,然后通过scope把它们关联到view上。如果在你的视图里面需要处理复杂的业务逻辑,那么把它们放到controller里面也是一个非常不错的选择。
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<