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圖像預覽

回答

相關問題