如何結合圖像源到文件對象在角

Question

我有兩個元件中的一個文件和另一個圖像

<input type='file' id='myfile' />
<img id='myImg' >

當我使用文件瀏覽選擇圖像，我的圖像對象應該與所選擇的圖像 更新我怎樣才能實現這一點使用角？

Answer 1

您可以使用ng-flow

退房畫廊上傳從這裏http://flowjs.github.io/ng-flow/

希望這可以幫助你！這樣做的

Answer 2

的Javascript方式是onchange事件是

var file = event.target.files[0]; 
var reader = new FileReader(); 
reader.onload = function (e) { 
    $('#myImg').attr('src', e.target.result); 
} 
reader.readAsDataURL(file); 

我需要它的角

Answer 3

使用的FileReader這一點。例如：

HTML

<div ng-app="app" ng-controller="Controller"> 
    <img ng-src="{{loadedFile}}" alt="" /> 
    <input type="file" value="load" onchange="angular.element(this).scope().fileLoaded(this)" /> 
</div> 

代碼

function Controller($scope) { 
    $scope.fileLoaded = function (e) { 
     var tgt = e.target || window.event.srcElement, 
      files = tgt.files, 
      fileReader; 

     if (FileReader && files && files.length) { 
      var fileReader = new FileReader(); 
      fileReader.onload = function() { 

       $scope.loadedFile = fileReader.result; 
       $scope.$apply(); 
      } 
      fileReader.readAsDataURL(files[0]); 
     } else { 
      // Not supported 
     } 
    }; 
}); 

---

Look fiddle