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

【问题标题】：How can I read a file from an HTML input with js-xlsx?如何使用 js-xlsx 从 HTML 输入中读取文件？
【发布时间】：2017-01-14 23:05:39
【问题描述】：

我有一个 Angular 应用程序，我正在尝试使用 js-xlsx JavaScript 库读取和解析 .xlsx 文件。但是我无法在 JavaScript 端打开文件。

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

添加-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;”时出现异常

我完全不知道如何解决这个问题，而且我看到的例子没有任何帮助。我做错了什么？

【问题讨论】：

标签： javascript html angularjs file-upload js-xlsx

【解决方案1】：

您正在寻找错误的对象，而不是您应该使用e.files。这是因为e 代表<input> 元素；又名 this 在您的 onchange 属性中的值：onchange="angular.element(this).scope().handleFile(this)"

$scope.handleFile = function(e) {

 console.log(e.files);
 var files = e.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);
}

}

【讨论】：