无法在addEventListener

时间:2017-02-27 13:43:48

标签: javascript html callback filereader addeventlistener

基本上我希望能够从.csv文件加载配置并使用它来设置HTML页面。经过一番挖掘后,我找到了FileReader和AddEventListener的通用解决方案。我的HTML看起来像这样:

<html>
    <head>
        <script src="kernel.js"></script>
        <script>
            var k = new kernel();
        </script>
    </head>

    <body>

        <input type="file" id="file-input" />
        <script>
            document.getElementById('file-input').addEventListener('change', k.loadConfig, false);
        </script>

        <!-- Tables and stuff that i want to modify -->

    </body>
</html>

kernel.js:

function kernel() {

    var self = this;
    this.config = null;

    this.readSingleFile = function(e) {

        var file = e.target.files[0];
        if (!file) return null;

        var reader = new FileReader();
        reader.onload = function(e) { self.config = e.target.result; };
        reader.readAsText(file);

    }

    this.loadConfig = function(e) {

        self.readSingleFile(e);
        console.log(self.config);

        // Do more stuff 

    }

}

然后,如果我没有弄错,console.log()应该显示文件的内容。但相反,它出现了空,我被卡住了。

如果有人可以帮助我,甚至指导我朝着正确的方向前进,我将非常感激。

此致 DOM。

1 个答案:

答案 0 :(得分:1)

您正在丢失执行上下文。您可以通过kernel.loadConfig明确地将kernel函数绑定到document.getElementById('file-input') .addEventListener('change', kernel.loadConfig.bind(kernel), false); 对象来修复它:

document.getElementById('file-input')
  .addEventListener('change', function() {
    kernel.loadConfig();
  }, false);

使用匿名函数作为事件处理程序也可以工作:

SELECT r.`id` 
FROM `requisitions` r JOIN `users` u JOIN `user_can_approve` uca 
  ON 
    u.`id` = uca.`user_id` 
  AND 
    r.`type` = uca.`requisition_type` 
  AND 
    r.`level` = uca.`requisition_level` 
WHERE uca.`user_id`=$currentUsersID