angular Directive-文件读取器未启动.文件加载时

angular Directive - file reader not firing.. on file load

本文关键字：文件 启动 加载 Directive- 读取 angular      更新时间：2023-09-26

我正在尝试读取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
           }
       })
    }
  }
})

实时演示

您没有添加触发加载事件的readAsDataURL api和更改时接收的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]);
})
相关文章：