Javascript 存储到内存中的 FileReader - 参数 1 不是 'Blob' 类型

Question

好的，所以我已经阅读了很多文章并尝试了很多方法。他们 work.I 都没有尝试将文件 Reader 构建到我的代码中，我只是一遍又一遍地出错。注意：这是代码的简化版本。我也尝试了大约 10 种不同的方法，但都没有成功，因此出现了这个问题。

function init(){
    // start the constructor
    constructTable = new constructTableS("ConstructionTable");
};

function constructTableS(name){
    // Variables 
    this.name = name;
    this.csv = "";
}

constructTableS.prototype.load = function(files){
    if (window.FileReader) {
        // FileReader is supported.
        var reader = new FileReader();

        reader.onload = function(e){
            //Tried this as well : var csv = event.target.result}; 
            this.csv = reader.result};

        var x = reader.readAsText(files);



    } else {
        alert('FileReader are not supported in this browser.');
    };

目标是从主体初始化开始函数。

<body onload="init()">

然后调用"class"的加载函数，把文件中的数据发送给它？

<input type="file" id="csvFileInput" onchange="constructTable.load(this.files)" accept=".csv">

我得到的错误是：parameter 1 is not of type 'Blob'. This comes from this line var x = reader.readAsText(文件);

我想做的是将数据加载到变量中，而不是 innerHTML 槽中。我读过很多这样的例子。

一旦事件被调用，它要么不识别我的class并忽略class中的任何函数，因此我无法存储数据。或者它只是 returns，不是 blob 类型。

我从这里拿了例子： http://mounirmesselmeni.github.io/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/

这行得通，但它不会将代码读入 class 中的变量，我可以在需要时调用它。

Answer 1

<input type="file" id="csvFileInput" onchange="constructTable.load(this.files)" accept=".csv"> this.files returns 上传文件数组，一次读取一个文件，使用循环

for (var i = 0; i < files.length; i++) {
    //your logic goes here
}

this 指的是当前的 HTMLElement，它是文件输入元素，这个元素有一个叫做 files 的属性，它是一个文件数组已选中。

或者如果您一次只允许用户上传一个文件，请将 this.files 更改为 this.files[0]

Javascript 存储到内存中的 FileReader - 参数 1 不是 'Blob' 类型

Javascript FileReader in a storing to memory - parameter 1 is not of type 'Blob'

javascript

filereader