AngularJS對文件輸入的簡單圖像預覽

Question

有人能告訴我爲什麼這段代碼不起作用嗎？ 這是我的預覽區域：

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

這我input：

<input type="file" file-input>

，並按照我的指令代碼：

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

當我插上input圖像想借圖像和顯示它預覽區域。

Answer 1

可以使用$範圍這樣的..

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

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