如何获取从文件输入标签中选择的文件的内容？

Question

我正在尝试将从文件输入中选择的文件的内容附加到可折叠的DIV元素中。为此，我需要读取所选文件的内容并将其附加到DIV元素。我正在使用 Angular JS。

sweeper.html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <form>
            <div class="form-group">
                <label class="control-label"> Choose a HTML File: </label> <input
                    id="file" type="file" file-model="sweep.file" name="file">
            </div>
            <div>
                <button class="btn btn-primary" type="submit"
                    ng-click="addCollapsibleDiv();">upload</button>
            </div>
            <div id="fileloader">
                <div class="panel-group" id="accordion" role="tablist"
                    aria-multiselectable="true">

                </div>
            </div>
        </form>
</div>

controller.js

对myApp         .controller（                 'HTMLSweeperCtrl'，                 函数（$ scope，$ http，$ state，DataService，$ window）{

                $scope.sweep = {
                    file : ''
                };

                $scope.addCollapsibleDiv = function() {
                    console.log("the selected file is: ");
                    console.log($scope.sweep.file);
                    if (typeof $scope.sweep.file != "undefined"
                            && $scope.sweep.file != "") {
                        var divHtml = "<div class='panel panel-default'>"
                                + "<div class='panel-heading' role='tab' id='headingOne'>"
                                + "<h4 class='panel-title'>"
                                + "<a role='button' data-toggle='collapse' data-parent='#accordion'"
                                + "href='javascript:void(0)' aria-expanded='true' data-target='#collapseOne'"
                                + "aria-controls='collapseOne'>"
                                + $scope.sweep.file.name
                                + "</a>"
                                + "</h4>"
                                + "</div>"
                                + "<div id='collapseOne' class='panel-collapse collapse in'"
                                + "role='tabpanel' aria-labelledby='headingOne'>"
                                + "<div class='panel-body'> Collapsibel DIV added </div>"
                                + "</div>" + "</div>";

                        var file = $('#file').files[0];
                        if (file) {
                            var reader = new FileReader();
                            reader.readAsText(file);
                            reader.onload = function(e) {
                                alert(e.target.result);
                            };
                        }

                        $('#fileloader #accordion').append(divHtml);
                        $scope.sweep.file = '';
                    }
                }
            });

我收到以下错误：

 Cannot read property '0' of undefined

我在哪里错了？