用javascript中的类读取用户输入的txt文件答案

【问题标题】：Read user input txt file with a class in javascript用javascript中的类读取用户输入的txt文件
【发布时间】：2018-04-13 22:08:25
【问题描述】：

我有一个需要从中提取数据的数据文件。它必须通过html输入提交。我想做一个 DataReader 类来这样做。类需要用文件构造，并从文件中提取其属性，所以

class DataReader() {
  constructor(file) {
     this.file = file;
  }
  extractData(){...}
}

var data = new DataReader(file);
console.log(data.attr0, data.attr1, data.attr3, ...);

我不断遇到范围问题，我不知道如何让类在实例化时获取文件，以便将其属性分开。

这就是我所拥有的

class DataReader {
setFile(file) {
    this.file = file;
}

getFile() {
    return this.file;
}

extractData() {
    var self = this; // this == DataReader

    var objXMLhttp = new XMLHttpRequest();
    objXMLhttp.open("GET","diabetes400.txt",true);
    objXMLhttp.send();

    objXMLhttp.onreadystatechange = function() {
      if (objXMLhttp.readyState==4 && objXMLhttp.status==200) {
        var arrContents = objXMLhttp.responseText.split("\n"); // gotcha!
        self.setFile(arrContents);
        console.log(arrContents);
      }
        }

    }
}

var data = new DataReader();
data.extractData();
console.log(data.file);

如果我只记录数据，我可以看到一个包含文件的对象，但文件打印未定义

【问题讨论】：

您能否详细说明“范围问题”？有任何错误消息，还是什么？
file 长什么样子？
那个“数据文件”在哪里？在您的网络服务器上？在您的本地服务器上？在您机器的文件系统上？其他地方？
它在我的文件系统上

标签： javascript file class input

【解决方案1】：

我认为您需要一个 FileReader。看看这个项目：http://bgrins.github.io/filereader.js/。您可以读取文件并获取其中的内容。

看这个例子：

var inputUpload = document.getElementById('file-input');
FileReaderJS.setupInput(inputUpload , {
    on: {
       load: function(event, file){
            var textBase64 = event.srcElement.result
            var decodedText = atob(e.srcElement.result.split("base64,")[1]);
       }
    }
});

【讨论】：