angularjs 上傳照片 電腦選取照片 並且預覽

 html 中代碼：

 <input type="file" file-Model="myFile"  />
    <div class="col-md-12">
      <img ng-src="{{imageSrc}}" style="width:300px;height:300px;" />
    </div>

controller中代碼：

  $scope.getFile = function (aaaa,bbbbb) {
         console.log("--------------");
         console.log($scope.file);
      console.log(aaaa);
      fileReader.readAsDataUrl(aaaa, bbbbb)
        .then(function(result) {
          console.log(result);

          $scope.imageSrc = result;
          console.log( $scope.imageSrc);
        });
    };

directive 中的代碼

.directive('fileModel', ['$parse','fileReader', function ($parse,fileReader) {
    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];
          console.log( scope.file);
          scope.getFile(scope.file, scope);
          //fileReader.readAsDataUrl(scope.file, scope)
          //  .then(function(result) {
          //    scope.imageSrc = result;
          //  });

        });
      },
      //controller:function($scope){
      //    $
      //}


    };
  }])

factory 中的代碼：

  .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
    };
  }])