角指令 - 文件阅读器上的文件加载不触发.. [英] angular Directive - file reader not firing.. on file load

问题描述

我试图读取angularjs上传的图像文件的数据。但像预期的那样，文件读取器的onload 功能无法正常工作。

i am trying to read the data of the uploaded image file in angularjs. but as like expected, the file readers onload functionality not working.

任何一个可以帮助我来解决这个问题，并读取图像文件来获得它的数据。

any one help me here to fix this issue and read a image file to get it's data.

这是我的code：

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

           }

       })

    }

  }

})

现场演示

推荐答案

你没有添加触发load事件和事件 readAsDataURL API 对象是在变化收

You didnt add the readAsDataURL api which triggers the load event and event object that is received on change

修正code： 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]);
})

这篇关于角指令 - 文件阅读器上的文件加载不触发..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！