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

我有一个angular应用程序，我试图借助js xlsx JavaScript库读取和解析.xlsx文件。但是，在JavaScript端打开文件时遇到问题

在我的html上，我有一个简单的文件类型输入，可以打开一个文件选择器，用户可以在其中选择适当的文件。我在使用angular指令将文件发送到控制器上的函数时遇到问题，因为只有在按下输入按钮时，当用户选择文件时，ng更改才会更新。最后，我不得不求助于简单的旧JavaScript和一些角度的混合，在输入中添加'onchange=“angular.element（this.scope（）.handleFile（this）”

add-Quotence.html：

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

我试着调试，发现文件确实进入了方法，但是在尝试访问“e.target.files；”时出现了异常

---

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

您在寻找错误的对象，而应该使用

e.files

。这是因为

e

表示

元素；aka您的

onchange

属性中

this

的值：

onchange=“angular.element（this.scope（）.handleFile（this）”

$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);
    }
}

$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);
}

}