угловая директива - считыватель файлов не срабатывает .. при загрузке файла

Question

Я пытаюсь прочитать данные загруженного файла изображения в angularjs. но, как и ожидалось, считыватели файлов onload не работают.

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

вот мой код:

app.directive('uploadImageFile', function() { 

    return { 

    link : function (scope, element, attrs) { 

     var inputFile = element.find('.upload-field'); 

     element.on('click', function() { 

     inputFile[0].click(); 

     }); 

     inputFile.on('change', function() { 


      var reader = new FileReader(); 

        reader.onload = function (loadEvent) { 

          console.log("load event", loadEvent.target.result); //nothing consoling here 

      } 

     }) 

    } 

    } 

}) 

Live Demo

Answer 1

Вы вратаря добавить readAsDataURL апи, который инициирует событие нагрузки и event объект, принимаемый по изменению

Исправленный код:Plunkr

inputFile.on('change', function (e) { 
     console.log("Changed"); 
     var reader = new FileReader(); 
     reader.onload = function (loadEvent) { 
      console.log("load event", loadEvent.target.result); 
     } 
     reader.readAsDataURL(e.target.files[0]); 
})