沒有文件閱讀器的Angularjs圖像預覽

Question

Angularjs：有沒有辦法，我可以在不使用文件閱讀器的情況下向用戶顯示由他選擇的圖像的圖像預覽。

下面是我的代碼試圖為它

<input type="file" file-model="myFile"/><br><br>
<button ng-click="uploadFile()">Upload</button>
<img src = {{image}}>   

<script>
      var mainApp = angular.module("mainApp", []);
      mainApp.controller('myController', function ($scope,$http) {
          $scope.uploadFile = function(){
          var file = $scope.myFile;
          var fd = new FormData();
         //fd will be an file object now, I want this to be converted to img 
          $scope.image = Resultimage;
          };
     });
     mainApp.directive('fileModel', ['$parse', function ($parse) {
     return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;
                element.bind('change', function(){
                    scope.$apply(function(){
                            modelSetter(scope, element[0].files[0]);
                            }); //end of scope.$apply
                    });//end of link
                }
           };
     }]); 

Answer 1

在您的情況下，您可以將$ scope.image設置為相等的URL.createObjectURL（file）;

<script>
function readfile(el) {
    let file = el.files[0];
    document.getElementById("previewImage").src = URL.createObjectURL(file);
}
</script>
<img id="previewImage">
<input type='file' onchange='readfile(this)'/>