javascript - 没有文件阅读器的 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)'/>