Предварительный просмотр изображения в angularjs - PullRequest
Новая
       15

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

0 голосов
/ 10 марта 2020

Я новичок в angularjs. Я работал над загрузкой файлов. Когда я использовал тег ввода в html, я не мог использовать атрибут onChange. Поэтому я использовал ng-change и вместо передачи события я передал файл в контроллер через ng-model. 

HTML:
<input type="file" id="files" ngf-select ng-model="files" ng-change="uploadFile()">

<img ng-src="image_source" alt="preview-image">

Файл, который я передаю, выглядит следующим образом: 

name: "slide5.jpg"
lastModified: 1580962915393
lastModifiedDate: Thu Feb 06 2020 09:51:55 GMT+0530 (India Standard Time) {}
webkitRelativePath: ""
size: 141266
type: "image/jpeg"
__proto__: File

И метод контроллера: 

function uploadFile() {
    var input = $scope.files;

    var reader = new FileReader();

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

И я тоже попробовал это 

function uploadFile() {

    var input = $scope.files;

    var reader = new FileReader();

    reader.readAsDataURL(input);

    reader.onload = function() {
    $scope.image_source = reader.result;
}

Он даже не входит в метод чтения onload. Я хочу получить sr c для изображения, чтобы я мог отобразить его перед загрузкой. Я также не знаю, почему onchange не работает и почему я не могу пропустить событие. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 10 марта 2020

Проверьте этот репозиторий, вы найдете полезную информацию о загрузке файлов. https://github.com/shystruk/file-upload-component

...