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

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值