試圖上傳圖像，並讓它顯示在屏幕上

Question

我想上傳圖像，並讓它顯示在屏幕上，但它不工作。誰能幫忙？我試圖立足我對這個示例解決方案：http://jsfiddle.net/kkhxsgLu/2/

查看

<div class="col-sm-6"> 
    Upload image: 
    <br><br> 
    <input id="file" type="file" accept="image/*" ng-model="file" ng-onchange="vm.imageUpload(this)"/> 
    <br> 
    <img ng-src="{{ file }}" /> 
</div> 

控制器

var vm = this; 
vm.file = {}; 

vm.imageUpload = function() { 
    var reader = new FileReader(); 
    reader.onload = vm.imageIsLoaded; 
    reader.readAsDataURL(element.files[0]); 
}; 

vm.imageIsLoaded = function(e) { 
    vm.$apply(function() { 
    vm.file = e.target.result; 
    }) 
} 

Answer 1

我通過查看回答以下問題固定它：ng-model for <input type="file"/> 。只是需要安裝以下指令：https://github.com/mistralworks/ng-file-model/並建立我的代碼中的觀點如下：

<input type="file" ng-file-model="file"/> 
    <br> 
    <img ng-src="{{ file.data }}" />