如何使用js-xlsx从HTML输入中读取文件？

Question

我有一个有角度的应用程序，我正在尝试使用js-xlsx JavaScript库来读取和解析.xlsx文件。但是我在JavaScript端打开文件时遇到了麻烦。

在我的html上，我有一个简单的类型文件输入，它打开一个文件选择器，用户可以在其中选择一个合适的文件。我无法使用angular指令将文件发送到控制器上的函数，因为当用户仅在按下输入按钮时选择文件时，ng-change不会更新。我最终不得不通过添加'onchange =“angular.element（this）.scope（）。handleFile（this）”'到我的输入来使用普通旧JavaScript和一些角度的混合物。

附加quotation.html：

<div class="container-fluid" ng-controller="addQuotationController">
...  
<input type="file" id="file" class="" onchange="angular.element(this).scope().handleFile(this)">
...
</div>

这解决了我无法将文件从HTML发送到JavaScript方面的问题。但是，我无法打开文件。我从官方文档中尝试了很多例子，但是我还没有成功地使它成功。这是我目前的代码：

附加quotation.component.js：

$scope.handleFile = function(e) {
    var files = e.target.files;
    var i,f;
    for (i = 0, f = files[i]; i != files.length; ++i) {
        var reader = new FileReader();
        var name = f.name;
        reader.onload = function(e) {
            var data = e.target.result;

            var workbook = XLSX.read(data, {type: 'binary'});

            /* DO SOMETHING WITH workbook HERE */
        };
        reader.readAsBinaryString(f);
    }
}

我尝试调试并发现该文件确实进入了该方法但是在尝试访问“e.target.files;”时发生异常

我完全迷失了如何解决这个问题，我见过的例子毫无帮助。我做错了什么？

Answer 1

iDoUnsafeStuff()