HTML5文件阅读器API:事件'加载'不会着火

HTML5 File Reader API: the event 'onload' does not fire

本文关键字：加载事件文件 API HTML5 更新时间：2023-09-26

我是AngularJS、HTML5和JavaScript的新手。我正在angularjs中做一项读取文本文件的服务。我使用的是HTML5文件阅读器API。问题是事件"onload"（或其他）没有激发。这就是服务：

angular.module('uploadFiles').factory('readFileAsTextService', function () {
    return {
        readFile: function (file) {
            var reader = new FileReader();
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                if ((file !== undefined) && (file !== null)) {   
                    reader.onload = function (event) {
                        return event.target.result;
                    };
                    reader.readAsText(file);
                }
            }
        }
    };
});

这里的控制器：

angular.module('uploadFiles').controller('UploadFileController', ['$scope', 'validFileExtensions', 'readRouteAsTextService',
    function FileUploadCtrl($scope, validFileExtensions, readFileAsTextService) {
        $scope.setFiles = function (element) {
            $scope.$apply(function ($scope) {
                $scope.files = [];
                for (var i = 0; i < element.files.length; i++) {
                    if validFileExtensions.validate(element.files[i].name,filesExtensions)) {
                        $scope.files.push(element.files[i]);
                        filesText[i] = readFileAsTextService.readFile(element.files[i]);
                    }
                }
            });
        };
}]);

我将展示一个必须工作的代码：

angular.module('uploadFiles').factory('readFileAsTextService', ["$q", function ($q) {
    return {
        readFile: function (file) {
            var deferread = $q.defer();
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                var reader = new FileReader();
                if ((file !== undefined) && (file !== null)) {
                    reader.onload = function (event) {
                        deferred.resolve(event.target.result);
                    };
                    reader.readAsText(file);
                }else{
                    deferred.resolve("You need to pass a file.");
                }
            }else{
                deferred.resolve("Your browser don't support File api.");
            }
            return deferread.promise;
        }
    };
}]);

并且在您的控制器中：

angular.module('uploadFiles').controller('UploadFileController', ['$scope', 'validFileExtensions', 'readRouteAsTextService',
    function FileUploadCtrl($scope, validFileExtensions, readFileAsTextService) {
        $scope.setFiles = function (element) {
            $scope.files = [];
            for (var i = 0; i < element.files.length; i++) {
                if(validFileExtensions.validate(element.files[i].name,filesExtensions)) {
                    $scope.files.push(element.files[i]);
                    (function(i){
                        readFileAsTextService.readFile(element.files[i]).then(function(text){
                            filesText[i] = text;
                        })
                    })(i);
                }
            }
        };
}]);

告诉我它是否有效。