Предварительный просмотр изображения перед загрузкой Angularjs

Question

Привет, мне было интересно, есть ли способ предварительного просмотра изображений, прежде чем я загружу их с помощью angularjs? Я использую эту библиотеку. https://github.com/danialfarid/angular-file-upload

Спасибо. Вот мой код:

template.html

<div ng-controller="picUploadCtr"> 
<form> 
     <input type="text" ng-model="myModelObj"> 
     <input type="file" ng-file-select="onFileSelect($files)" > 
<input type="file" ng-file-select="onFileSelect($files)" multiple> 

</form> 
    </div> 

controller.js

.controller('picUploadCtr', function($scope, $http,$location, userSettingsService) { 

$scope.onFileSelect = function($files) { 
//$files: an array of files selected, each file has name, size, and type. 
for (var i = 0; i < $files.length; i++) { 
    var $file = $files[i]; 
    $http.uploadFile({ 
    url: 'server/upload/url', //upload.php script, node.js route, or servlet uplaod url) 
    data: {myObj: $scope.myModelObj}, 
    file: $file 
    }).then(function(data, status, headers, config) { 
    // file is uploaded successfully 
    console.log(data); 
    }); 
} 
} 

Answer 1

OdeToCode posted great service для этого материала. Так что с этой простой директивой вы можете легко просматривать и даже видеть прогресс бар:

.directive("ngFileSelect",function(){  
    return { 
    link: function($scope,el){   
     el.bind("change", function(e){   
     $scope.file = (e.srcElement || e.target).files[0]; 
     $scope.getFile(); 
     });   
    }   
    } 

Он работает во всех современных браузерах!

Пример: http://plnkr.co/edit/y5n16v?p=preview

Answer 2

Смотрите изображения Загрузить виджет из Jasney extension of Bootstrap v3

Answer 3

JavaScript

$scope.setFile = function(element) { 
    $scope.currentFile = element.files[0]; 
    var reader = new FileReader(); 

    reader.onload = function(event) { 
    $scope.image_source = event.target.result 
    $scope.$apply() 

    } 
    // when the file is read it triggers the onload event above. 
    reader.readAsDataURL(element.files[0]); 
} 

Html

<img ng-src="{{image_source}}"> 
<input type="file" id="trigger" class="ng-hide" onchange="angular.element(this).scope().setFile(this)" accept="image/*"> 

Это сработало для меня.

Answer 4

// start Picture Preview  
    $scope.imageUpload = function (event) { 
     var files = event.target.files; 

     for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
      var reader = new FileReader(); 
      reader.onload = $scope.imageIsLoaded; 
      reader.readAsDataURL(file); 
     } 
    } 

    $scope.imageIsLoaded = function (e) { 
     $scope.$apply(function() { 
      $scope.img = e.target.result;    
     }); 
    } 


<input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" /> 
<img class="thumb" ng-src="{{img}}" />