Question

我有以下输入文件：

<div class="col s12">
     <h6>Foto</h6>
     <div class="file-field input-field">
          <div class="btn pink darken-2 waves-effect waves-light">
               <span>Archivo</span>
               <input type="file" name="image" id="image"
               file-model="picture.image" custom-on-change="renderPreview">
           </div>
           <div class="file-path-wrapper">
               <input class="file-path" type="text" readonly>
           </div>
    </div>
</div>

当指令custom-on-change触发时，我从输入中获取文件（console.log()在这里工作）所以我接下来要做的是预览我刚刚选择的图像：

$scope.renderPreview = function(event){
      var picture = event.target.files;
      console.log(picture);
      $('#image-preview').attr('src', picture);
}

应该放在这里：

<h5 class="center-align">Vista Preliminar</h5>
<div class="col s6 offset-s3">
     <div class="image-preview-container">
          <img id="image-preview" class="z-depth-2">
     </div>
</div>

但是，没有渲染图像。我一直在努力寻找解决方案，人们总是会把你发送到那些角度文件上传插件..我不想将这些插件用于这样一个简单的任务。

我有没有办法渲染图片，以便用户可以在上传之前看到它？

修改

我的变更指令：

angular.module('sccateringApp')
  .directive('customOnChange', function () {
      return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var onChangeHandler = scope.$eval(attrs.customOnChange);
        element.bind('change', onChangeHandler);
      }
    };
  });

Answer 1

在您的代码中，var picture是文件数组，因此请使用index来显示图像

$scope.renderPreview = function(event){
      var pictures = event.target.files;
      $('#image-preview').attr('src', pictures[0]);
}

根据@HanletEscaño的建议尝试以下代码

$scope.renderPreview = function (event) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#image-preview').attr('src', e.target.result);
    }

    reader.readAsDataURL(event.target.files[0]);
  }
};

AngularJS图像预览

1 个答案: