FileReader() onload 函数未触发

Question

我知道这是重复的，但到目前为止 none 的答案对我有帮助..

我有这个指令：

app.directive('fileReader', function () {
    return {
        scope: {
            fileReader: "="
        },
        link: function (scope, element) {
            $(element).on('change', function (changeEvent) {
                var files = changeEvent.target.files;
                if (files.length) {
                    var reader = new FileReader();
                    console.log('reader created');
                    reader.onload = function (e) {
                        console.log('onload hit');                           
                    };
                }
            });
        }
    };
})

并且这个 DOM 元素链接到指令：

<input type="file" id="file" file-reader="fileContent"/>

当我 select 输入一个文件时，我的控制台打印出 reader created，但从不打印 onload hit。我不知道如何正确启动我的 onload 函数。我在这里做错了什么？

Answer 1

### Directive ###
    app.directive('fileReader', ['$rootScope', function($rootScope) {
     return {
        scope: {
            fileReader:"="
        },
        link: function(scope, element) {
            $(element).on('change', function(changeEvent) {
                var files = changeEvent.target.files;
                if (files.length) {
                    $rootScope.uploadedFileName = files[0].name;
                    var r = new FileReader();
                    r.onload = function(e) {
                        var contents = e.target.result;
                        scope.$apply(function () {
                            scope.fileReader = contents;    
                            $rootScope.uploadedFileName = files[0].name;                        
                        });
                    };
                    r.readAsText(files[0]);
                }
            });
        }
     };
    }]);

### HTML ###

    <input type="file" accept=".csv" id="myFile" file-reader="fileContent"/>

FileReader() onload 函数未触发

FileReader() onload function not firing

filereader

angularjs

angularjs-directive