Question

我是Angular的新手，我正在尝试创建一个应用，其中着陆页允许用户上传.txt文件。由于我的方式，我遇到了数据未正确加载的问题，因此页面在用户上传文件之前查找数据。我无法弄清楚如何正确地做到这一点？如果有人可以向我展示或指出我在资源方面的正确方向，那将是非常有帮助的。

以下是我的四个文件：

index.html：

<!doctype html>
<html lang="en" ng-app="resume_uploader">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Resume Builder</title>

    <!-- Bootstrap css and my own css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">

    <div ng-controller="resumeCtrl as resume">
    <input type=file id=files />
    <button id=upload>Upload</button><br>
        {{resume.text}}
    </div>
</div>

<script src="js/app.js"></script>
<script src="js/factories/dataservice.js"></script>
<script src="js/controllers/resume.js"></script>
</body>

</html>

app.js：

(function() {
    angular
        .module("resume_uploader", []);
})();

resume.js：

(function() {
    angular
        .module("resume_uploader")
        .controller("resumeCtrl", ResumeController);

    ResumeController.$inject =['DataService'];

    function ResumeController(DataService) {
        this.DataService = DataService;
        this.text = DataService.processFile;
    }
})();

dataservice.js：

(function() {
    angular
        .module("resume_uploader")
        .factory("DataService", DataService);

function DataService() {
    var dataObj = {
        processFile: processFile()
        //TODO: Data Parse
    };
    return dataObj;
}

var fileInput = $('#files');
var uploadButton = $('#upload');

uploadButton.on('click', function() {
    if(!window.FileReader) {
        alert('Your browser is not supported')
    }
    var input = fileInput.get(0);

    // Create a reader object
    var reader = new FileReader();
    if(input.files.length) {
        var textFile = input.files[0];
        reader.readAsText(textFile);
        $(reader).on('load', processFile);
    } else {
        alert('Please upload a file before continuing')
    }
});

function processFile(e) {
    var file = e.target.result,
        results;
    if(file && file.length) {
        results = file.split("\n");
        }
        return results;
    }
})();

真的很感激任何和所有的帮助。谢谢！

无法弄清楚如何使用Angular正确上传文件

0 个答案: