由网友(野性傀儡)分享简介：我试图读取angularjs上传的图像文件的数据。但像预期的那样，文件读取器的onload 功能无法正常工作。i am trying to read the data of the uploaded image file in angularjs. but as like expected, the file rea...

我试图读取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]);
})