JavaScript：从本地文件读取纯文本后，如何将数据保存到变量中？ [复制]答案

【问题标题】：JavaScript: How do I save data into a variable AFTER reading plain text from a local file? [duplicate]JavaScript：从本地文件读取纯文本后，如何将数据保存到变量中？ [复制]
【发布时间】：2016-06-15 18:04:48
【问题描述】：

我找到了许多关于从本地文件读取纯文本并将该文本显示到网页元素上的 JavaScript 教程，但我似乎无法找到如何将数据保存到可以从我的其他部分访问的数组中脚本。

如果我尝试将文件中的文本分配给 FileReader.onload() 方法内的全局变量，我无法在方法外访问它。有什么建议吗？

以下代码适用于我正在与学生一起使用课程、学生和教师的本地文件的学校时间表项目。我有一个文件输入元素定义为：

<input type="file" id="courseFile" onchange="School.addCourses(event);">

那么我的 School 构造函数包括以下数组和方法：

function School (name) {
    this.courses = [];
    this.students = [];
    this.teachers = [];

    this.addCourses = function (event) {
        var fileInput = event.target;
        var r = new FileReader();
        r.readAsText(fileInput.files[0]);
        r.onload = function (e) {
            var text = r.result;
            var array = text.split("\n");
            document.getElementById("courseList").innerHTML = text;
            this.courses = array;
        }
    }
}

文本被加载到text，然后拆分为array，甚至会显示在页面上courseList元素中，但它不会将数据复制到this.courses中。

【问题讨论】：

this 里面的函数和外面的this 不一样。您要么必须使用全局引用，要么使用 bind stackoverflow.com/questions/2236747/…
对不起，我缺乏理解。通过全局引用，您是指下面 MISJHA 提供的解决方案——使用文字对象名称，如School.course？而且我不明白在这种情况下如何使用bind() 方法。你能给我多一点指导吗？
见codepen.io/anon/pen/LZZJzv
非常感谢！！我仍然不知道我是否真的了解bind() 方法的工作原理，但是您解决了我的问题！知道你让别人很开心，请休息一天！
Derek，bind 所做的是为函数内部的this 变量设置一个新值。通常，事件处理程序会将this 设置为触发事件的对象。因此，在您的情况下，当您在处理程序中设置this.courses 时，您实际上是在创建一个与this 关联的新对象，即input 对象。使用 bind() ，外部函数中的 this 被保留。

标签： javascript file bind local filereader

【解决方案1】：

这里的问题是this 在addCourses 中的范围。要访问 function School 范围，您需要将 this.courses = array 更改为 School.course = array

希望这会有所帮助！

【讨论】：

感谢您的快速回复！您的建议在 onload() 方法中有效——如果我添加 alert(School.courses) 然后它会显示课程。但是如果我在 onload() 方法之外添加alert(this.courses)，那么它会显示undefined。
请注意 this.courses 是 School 的一个属性，所以你想在 addCourses 中引用它的任何地方都必须使用 School.courses
如果我想在School 类中添加其他可以访问courses 数据的方法怎么办？如果我必须总是引用School.courses，那不是违背了使用对象的目的吗？也许上面建议的bind 方法可能会有所帮助？