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

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

В моем html у меня есть простой ввод типа файла, который открывает средство выбора файлов, где пользователь может выбрать соответствующий файл. У меня были проблемы с использованием директив angular для отправки файла функции на моем контроллере, потому что 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;»

входим в функцию

пытается получить доступ к e.target.files

Я совершенно не понимаю, как это исправить, и примеры, которые я видел, бесполезны. Что я делаю не так?


javascript html file-upload angularjs js-xlsx
person João Paiva    schedule 07.09.2016    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы ищете не тот объект, скорее вам следует использовать 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);
}

}
person ngCoder    schedule 08.09.2016