AngularJS圖片上傳功能的實現

1、前言

前一段時間作項目時，遇到一個問題就是AngularJS實現圖片預覽和上傳的功能，當時查閱文檔(都是英文文檔)折騰了好久才弄出來，現將整個流程整理出來，有須要的朋友能夠參考一下，若是您有更好的方法，歡迎留言交流~~話很少說直接看實現。

2、具體實現

一、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標籤爲圖片預覽區域

二、定義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)

三、定義控制器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是如何定義的呢？

四、定義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進行預覽。

五、附件上傳的實現

附件上傳主要是將頁面表單數據經過後臺提供的接口寫入到數據庫中，具體實如今控制器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.myFile, 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請求。

3、對Angular中service、controller、directive的認識和理解

Service就是單例對象在AngluarJS 中的一個別名。這些單例對象會被常常傳來傳去，保證你每次訪問到的都是同一個實例。基於這種思想，單例對象讓咱們能夠實現一些至關酷的功能，它可讓不少controller和directive訪問其內部的數值。

controller把service、依賴關係、以及其它對象串聯到一塊兒，而後經過scope把它們關聯到view上。若是在你的視圖裏面須要處理複雜的業務邏輯，那麼把它們放到controller裏面也是一個很是不錯的選擇。

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

 轉載來源：http://www.cnblogs.com/changjianqiu/