如何先加载文件，然后执行 FileReader答案

【问题标题】：how to load the file first and then execute FileReader如何先加载文件，然后执行 FileReader
【发布时间】：2019-01-02 18:56:26
【问题描述】：

我正在尝试从输入加载文件，然后使用 filereader 读取文件。现在我只要单击按钮就会收到此错误。

dataControls.js:42 Uncaught (in promise) TypeError: 无法在“FileReader”上执行“readAsText”：参数 1 不是“Blob”类型。

HTML:
     <div style="padding:0px;">
        <button id="saveData" type="button" class="btn btn-primary" data-toggle="button" title="Save Data">
            <i class="fa fa-floppy-o" aria-hidden="true"></i>    
        </button>
        <button id="loadData" type="button" class="btn btn-warning" data-toggle="button" title="Will reload the data from the last save">
            <i class="fa fa-reply-all" aria-hidden="true"></i>
        </button>
        <button id="clearData" type="button" class="btn btn-danger" data-toggle="button" title="Clear stored data">
            <i class="fa fa-times" aria-hidden="true"></i>
        </button>
        <input type="file" accept=".data" id="load" on style="display:none" >
        </div>

JS：

$("#loadData").click(async () => {
    if (!grid || !grid.getInstance() || !JSON.parse(localStorage.getItem('data') || "[]").length) {
        alerts.error("No data available to load yet")
        return;
    }

    var input = document.getElementById('load');
    input.click();  
    var file = document.getElementById("load").files[0];
        var reader = new FileReader();
       reader.onload = read;
       function read(evt){
           var text =reader.result;
       }

        reader.readAsText(file);
        var data = reader.result;
        console.log(reader.result)
        grid.setData(JSON.parse(data)).getInstance().loadData()
         alerts.success("Data loaded successfully.")
})

我希望文件先加载，然后再执行。

【问题讨论】：

标签： javascript filereader

【解决方案1】：

在执行input.click() 之前，您需要将var file... 中的所有代码包装到一个设置为input.onload 的函数中

$("#loadData").click(async () => {
    if (!grid || !grid.getInstance() || !JSON.parse(localStorage.getItem('data') || "[]").length) {
        alerts.error("No data available to load yet")
        return;
    }

    var input = document.getElementById('load');
    
    input.onload = function(){
      var file = document.getElementById("load").files[0];
        var reader = new FileReader();
       reader.onload = read;
       function read(evt){
           var text =reader.result;
       }

        reader.readAsText(file);
        var data = reader.result;
        console.log(reader.result)
        grid.setData(JSON.parse(data)).getInstance().loadData()
         alerts.success("Data loaded successfully.")
    
    }
    
    input.click();
})

【讨论】：

我能够在逐行调试时读取它，但是当我运行它时 reader.readAsText(file);抱怨文件尚未设置，因为它似乎是之前执行的。需要点击输入后执行
输入被点击并且 input.onload 中的代码没有发生任何事情。
您实际上在哪里将文件加载到输入中？也可能是您需要的 onchange 事件 - 但无论哪种方式，文件都必须加载到某个地方