render image on change

Question

gibt es eine Möglichkeit für mich, das Bild in angularjs zu rendern ... like, wie Sie Bild hier in stackoverflow hochladen ... wenn Sie ein Bild auswählen, wird das Bild zuerst rendern, bevor Sie hochladen können ...

ich bin wirklich neu in diesem so mit mir tragen ..

Controller

$scope.uploadFile = function(parameter){ 
    console.log(parameter[0]); 
    $scope.profilePic = parameter[0]; 
}; 

HTML

<div class="row"> 
    <div class="col-md-12"> 
     <img src="{{profilePic}}" class="img-responsive img-thumbnail"/> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 
     <input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" /> 
    </div> 
</div> 

gibt es auch ein Problem ng-change bei der Verwendung gibt es mir einen Fehler .. anonyme Funktion Fehler ..

Answer 1

Verwendung ng-src statt src in

<img ng-src="{{profilePic}}" class="img-responsive img-thumbnail"/> 

ng-src wird Setzen Sie die Zuweisung der Bildquelle aus, bis das Bild verfügbar ist

Kontrolle dieses plnk es, wie Sie wollen arbeiten, hoffen, dass es

ich habe

hilft, eine readURL(input) Funktion nur hinzugefügt, die unter Verwendung von FileReader und wandelt das hochgeladene Bild

lesbares Format, das ich es verwendet

Answer 2

nicht sehen u ng-change verwenden Sie <input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />. U kann versuchen onchange="angular.element(this).scope().uploadFile(this.files)" zu ng-change="uploadFile(this.files)"