angularjs 上传照片电脑选取照片并且预览

淩亂°似流年 2022-05-19 02:45 210阅读 0赞

html 中代码：

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