Alasql 从上传按钮导入 vs 文件 onchange 事件

Question

我正在尝试弄清楚如何将文件从文件输入导入 ALASQL。有关于如何执行此操作的文档，但我的客户希望在选择文件时必须按下加载按钮。

这是来自 ALASQL 的文档：

<script src="xlsx.core.min.js"></script>
<p>Select CSV file to read:&lt;/p>
<input id="readfile" type="file" onchange="loadFile(event)"/>
<script>
    function loadFile(event) {
        alasql('SELECT * FROM FILE(?,{headers:true})',[event],function(data){
            // Process data here
        });
     }
</script>

https://github.com/agershun/alasql/wiki/How%20to%20upload%20form%20for%20txt%20and%20xlsx%20in%20javascript

我的客户想要这样的东西：

<script src="xlsx.core.min.js"></script>
<p>Select CSV file to read:&lt;/p>
<input id="readfile" type="file"/>
<button onclick="loadfile()">Load</button>
<script>
    function loadFile() {
        var file=document.getElementById('readfile').files[0]
        alasql('SELECT * FROM FILE(?,{headers:true})',[file],function(data){
            // Process data here
        });
     }
</script>

我已经尝试了多种方法来实现这一点，但到目前为止没有任何效果。我尝试过的一些方法包括创建自定义 jQuery 事件和上面的示例。

我发现一篇 SF 文章提出了类似的问题，但没有得到答复。 Loading CSV file with AlaSQL and JQuery

谢谢

Answer 1

我想出的一个答案是将加载文件进程拆分为两个函数，例如：

<script src="xlsx.core.min.js"></script>
<p>Select CSV file to read:&lt;/p>
<input id="readfile" type="file" onchange="loadfile(event)"/>
<button onclick="loadfile2()">Load</button>
<script>
    var loadFileTempData=[];
    function loadFile() { //load data file into variable
        var file=document.getElementById('readfile').files[0]
        alasql('SELECT * FROM FILE(?,{headers:true})',[file],function(data){
            loadFileTempData=data;
        });
     }
     function loadFile2(){ //process data from variable
         var data=loadFileTempData;
         loadFileTempData=[];
         // Process data here
     }
</script>

Alasql 从上传按钮导入 vs 文件 onchange 事件

Alasql import from upload button vs file onchange event

html

javascript

alasql