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里面也是一個非常不錯的選擇。

Angular對directive的定義是一段代碼片段，你可以用它來操作DOM，也可以使用它來進行用戶交互。

如需轉載本文，請注明來源： http://www.cnblogs.com/changjianqiu/