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

我试图将从文件输入中选择的文件的内容附加到可折叠的DIV元素中。为此，我需要读取所选文件的内容并将其附加到DIV元素。我正在使用角度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>

---

这里哪里出错了？

您试图读取jQuery对象的

文件

属性，而不是本机对象。尝试使用

var file=$（'#file'）[0]。文件[0]感谢@kosmos的更正。现在可以了！您正在尝试读取jQuery对象的
文件
属性，而不是本机对象。尝试使用
var file=$（'#file'）[0]。文件[0]感谢@kosmos的更正。现在可以了！
                $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