无法获取fileReader.onload功能

Question

我使用这样的事情在角

app.controller('techiesClub', function($scope, $http) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 

    $scope.asdf = "ankur"; 
    $scope.uploadImage = function() { 
     alert($scope.asdf);   ////////////WORKS WELL 
     var filesSelected = document.getElementById("upload").files; 
     if (filesSelected.length > 0) { 
      var fileToLoad = filesSelected[0]; 

      var fileReader = new FileReader(); 

      fileReader.onload = function(fileLoadedEvent, ss) { 
      var srcData = fileLoadedEvent.target.result; // <--- data: base64 

      $scope.asdf = srcData; //////////////////NOT WORKING 

      } 
      debugger; 
      fileReader.readAsDataURL(fileToLoad, $scope); 
     } 
    } 
}); 

使用uploadImage方法上的onchange一个输入的这样

<input type="file" id="upload" name="pic" class="form-control" onchange="angular.element(this).scope().uploadImage()"> 

我无法在$范围变量获取srcData，即base64数据到一个变量，我可以使用其他地方。

Answer 1

Ankur，

我们可以用这种方法重写html。

<input type="file" id="upload" name="pic" class="form-control" onchange="angular.element(this).scope().uploadImage(this);"> 

JS代码片段在这里..我想与Blob版本。

$scope.uploadImage = function ($event) { 
    alert($scope.asdf);   ////////////WORKS WELL 
    var filesSelected = $event.files; 
    if (filesSelected.length > 0) { 
     var fileToLoad = filesSelected[0]; 
     var _ULR = window.URL || window.webkitURL; 
     var img = new Image(); 
     img.onload = function() { 
     var srcData = this.src; // <--- data: blob 
     $scope.asdf = srcData; //////////////////NOT WORKING 
     };debugger; 
     img.src =_ULR.createObjectURL(fileToLoad); 

    } 
} 

Answer 2

我认为你错过了解决方案的关键点。我只是改变你访问base64内容的方式。它应该工作。

$scope.uploadImage = function() { 
    alert($scope.asdf);   ////////////WORKS WELL 
    var filesSelected = document.getElementById("upload").files; 
    if (filesSelected.length > 0) { 
     var fileToLoad = filesSelected[0]; 

     var fileReader = new FileReader(); 

     fileReader.onload = function(fileLoadedEvent) { 
     var srcData = fileReader.result; // <--- data: base64 

     $scope.asdf = srcData; //////////////////NOT WORKING 

     } 
     debugger; 
     fileReader.readAsDataURL(fileToLoad); 
    } 
}