一、前言

前一段时间做项目时，遇到一个问题就是AngularJS实现图片预览和上传的功能，当时查阅文档(都是英文文档)折腾了很久才弄出来，现将整个流程整理出来，有需要的朋友可以参考一下，如果您有更好的方法，欢迎留言交流~~话不多说直接看实现。

二、具体实现

1、html标签结构

? ?

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中增加如下代码：