4

我有一个角度应用程序，我正在尝试读取和解析一个 .xlsx 文件，该文件采用 js-xlsx JavaScript 库。但是我无法在 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;”时出现异常

进入功能

试图访问 e.target.files

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

4

1 回答 1

8

您正在寻找错误的对象，而不是您应该使用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);
}

}
于 2016-09-08T06:08:10.193 回答