Question

    myApp.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(e) {
      $scope.$apply(function(e) {
        modelSetter($scope, element[0].files[0]);
      });
      $scope.setimage();
    });
  }

以上代码是我的指示。

在函数$ scope.setimage（）

中

     $scope.setimage = function() {
  var file = $scope.myFile;
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    $scope.ImageSrc = e.target.result;
  }
}

每当我选择文件时，

  <img width= 250 height=350 ng-src="{{ImageSrc}}"/>
  <input type=`enter code here`"file" file-model="myFile"/>

预览未立即显示。当我第二次选择时，会出现先前所选图像文件的预览。不确定是什么问题。

Answer 1

而不是element.bind('change', ...，您可以在myFile上使用$scope.$watch，如下所示：

$scope.$watch('$scope.myFile', function(e) {
  $scope.$apply(function(e) {
    modelSetter($scope, element[0].files[0]);
  });
  $scope.setimage();
});

请注意，需要为此定义$scope.myFile，因此如果未在指令中定义，则需要将其添加到控制器中。

Answer 2

我添加了$ scope。$申请了imagesrc分配并立即更新了图片。

   $scope.setimage = function() {
   var file = $scope.myFile;
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function(e) {
     $scope.$apply(function(){
      $scope.ImageSrc = e.target.result;
    });  }
   }

上传前的AngularJS图像预览显示选择的上一个图像

2 个答案: