Question

我是AngularJS，HTML5和JavaScript的新手。我在angularjs中提供读取文本文件的服务。我正在使用HTML5文件阅读器API。问题是事件＆＃39; onload＆＃39;（或其他）不会触发。这是服务：

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

            });
        };
}]);

Answer 1

我将展示一个必须运行的代码：

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

        };
}]);

告诉我它是否有效。

HTML5文件阅读器API：事件'onload'不会触发

1 个答案: