AngularJS图像预览

我有以下输入文件：AngularJS图像预览

<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); 
     } 
    }; 
    });

来源

2016-01-06 codeninja

什么是控制台日志console.log（图片）; –

[上传前预览图像]可能重复（http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded） –

'FileList {0：File} 0： Filelength：1__proto__：FileList [object％20FileList]：1 GET http：// localhost：9000/[object％20FileList] 404（Not Found）'console.log（）@RohanPawar上显示的内容 – codeninja

在你的代码变种picture是文件的数组，所以使用索引显示图像

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

为per @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]); 
    } 
};

来源

2016-01-06 05:14:34

已更改，仍然无法使用@RohanPawar – codeninja

显示您的'定制修改'指令 –

编辑我的文章， – codeninja

AngularJS图像预览

回答

相关问题