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

Question

Я загрузку файлов с помощью сервиса:

var addFile = function(files) { 
    var deferred = $q.defer(); 
    var fd = new FormData(); 
    fd.append("file", files[0]); 
    $http.post("/files", fd, { 
     *** 
    }) 
    .success(function(data, status, headers, config) { 
     *** 
    }) 
    .error(function(err, status) { 
     *** 
    }); 
    *** 
}; 

и контроллер у меня есть что-то вроде:

uplService.addFile($scope.files).then(function(url) { 
    $scope.news.Photo = url; 
}); 

и с точки зрения HTML:

<input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" /> 

до этого я загрузил файл на ходу, когда я выбираю файл, он переходит непосредственно на сервер, но теперь мне нужно отобразить его в моей форме, когда Я выбираю его, но загружаю позже, все, что я вижу в Интернете, использует директивы, но как я могу организовать его без использования директив?

Answer 1

Я прочел это article, что помогло мне решить проблему с загрузкой изображения.

Если вы хотите, чтобы показать выбранный файл, попробуйте следующее:

<img data-ng-src="data:image/png;base64,{{news.Photo}}" id="photo-id"/> 

Объяснение:

Ваше имущество для изображения в модели/ViewModel/Класс должен быть массивом байтов, как

public byte[] Photo { get; set; } 

Данные: image/jpeg; base64 определяет массив байтов от news.Photo, поэтому его можно визуализировать правильно в браузере клиентов.

$scope.news.Photo В вашем случае это только переменная с областью, которая содержит вычерченное изображение с байтом, созданным эквивалентом байта в функции $ scope.uploadFile из статьи.

Я надеюсь, что он также будет полезен для вас.

Answer 2

Вы можете попробовать это в вашем контроллере, чтобы передать свой объект файл здесь:

$scope.fileReaderSupported = window.FileReader != null; 
$scope.photoChanged = function(files){ 
    if (files != null) { 
     var file = files[0]; 
    if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) { 
     $timeout(function() { 
      var fileReader = new FileReader(); 
      fileReader.readAsDataURL(file); 
      fileReader.onload = function(e) { 
       $timeout(function(){ 
        $scope.thumbnail.dataUrl = e.target.result; 
       }); 
      } 
     }); 
    } 
} 
}; 

и на представлении

<img ng-show="thumbnail.dataUrl != null" ng-src="{{ thumbnail.dataUrl }}" class="thumb"> 

demo here

Надежда эта помощь