Как я могу прочитать файл с входа в формате HTML с помощью js-xlsx?

Question

У меня есть угловое приложение, где я пытаюсь прочитать и проанализировать файл .xlsx, прибегая к библиотеке JavaScript js-xlsx. Однако мне трудно открыть файл со стороны JavaScript.

В моем html У меня есть простой ввод файла типа, который открывает выбор файла, где пользователь может выбрать соответствующий файл. У меня возникли проблемы с использованием угловых директив для отправки файла на функцию на моем контроллере, потому что ng-change не обновлялся, когда пользователь выбирал файл только при нажатии кнопки ввода. Мне пришлось прибегнуть к смеси простого старого JavaScript вместе с некоторым угловым, добавив «onchange =» angular.element (this) .scope(). HandleFile (this) «» на мой вклад.

надстройку 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

You are looking for wrong object rather you should be doing e.files 

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

}