Unable $ scope Variablen innerhalb der fileReader.onload Funktion

Question

Ich bin mit so etwas wie dies in Winkel

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

Mit upload Methode auf onchange eines Eingangs wie dieses

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

Ich bin nicht in der Lage zu bekommen um die srcData dh die base64-Daten in eine Variable zu bekommen, die ich sonst wo verwenden kann.

Answer 1

Ankur,

Wir können html auf diese Weise neu zu schreiben.

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

JS Schnipsel hier .. Ich versuche mit Blob-Version.

$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

Ich denke, dass Sie den Kernpunkt in Ihrer Lösung vermissen. Ich ändere einfach die Art und Weise, wie du auf den base64-Inhalt zugreifst. Es sollte funktionieren.

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