AngularJS einfache Bildvorschau auf Dateieingabe

Question

Kann mir jemand sagen, warum dieser Code nicht funktioniert? dies mein Vorschaubereich:

<div class="preview"><img src="" alt=""></div>

und das ist mein input:

<input type="file" file-input>

und meine Richtlinie Code folgen:

var cmos = angular.module('cmos', ['simditor']); 
    // controller 
    cmos.controller('cmosCtrl', function($scope){} 
    // directive 
    cmos.directive("fileInput", function($parse){ 
      return{ 
       link: function($scope, element, attrs){ 
        element.on('change', function(event){ 
         var files = event.target.files;    

         var reader = new FileReader(); 

         var img = document.querySelector(".preview > img"); 
         reader.addEventListener("load", function(){ 
          img.src = reader.result; 
         }, false); 

         if(files){ 
          reader.readAsDataURL(files[0]);     
         } 
         // console.log(files[0]); 
        }); 
       } 
      } 
    }); 

Wenn ich ein Bild auf input einfügen möchten, ein Bild nehmen und Zeigen Sie es an, um den Vorschaubereich anzuzeigen.

Answer 1

kann $ Umfang wie diese verwenden ..

<div class="preview"><img src="{{imageUrl}}" alt=""></div> 

und in js.

var files = event.target.files; 
        var reader = new FileReader(); 

        reader.addEventListener("load", function(){ 
         $scope.imageUrl = reader.result; 
        }, false); 

        if(files){ 
         reader.readAsDataURL(files[0]);     
        }