Angular上传文本文件然后获取内容

时间:2016-07-19 18:18:48

标签: javascript angularjs ng-file-upload

我正在试图弄清楚如何读取上传到我的WebApp上的text / xml文件的内容。此时我不想/需要点击服务器,我只是想获取文件的内容/文本。

这是我到目前为止所做的事情: 的 xmlDiff.html:

<div id="xmlDiff-div" class="wrapper">
    <div class="configurationView ">
        <div class="panelHeader">Upload XML Files</div>
        <div class="treeWrapper panelBody">
            <button ngf-select="uploadLeftFile($file)" accept="xml/*" ngf-max-height="1000" ngf-max-size="2MB">
                Upload Left File</button>
            <br><br>
            <button ngf-select="uploadRightFile($file)" accept="xml/*" ngf-max-height="1000" ngf-max-size="2MB">
                Upload Right File</button>
            <br><br>
        </div>
    </div>
    <div id="diff_editors_div">
        <div class="panelheader sectionHeader">XML Diff Results</div>
        <div id="compare"></div>
    </div>
</div>

现在,这是我的控制器:

app.controller('XmlDiffCtrl', ['$scope', '$q', '$location', '$timeout', function ($scope, $q, $location, $timeout) {
    $('#compare').mergely({
        cmsettings: {readOnly: false, lineNumbers: true},
        ignorews: true,
        width: 'auto',
        height: 'auto',
        lhs: function (setValue) {
            setValue('paste left XML here');
        },
        rhs: function (setValue) {
            setValue('paste right XML here');
        }
    });
    $scope.uploadRightFile = function (file) {
        console.log("Upload Right File has been called");
        console.log("file content :" + file);
        $scope.rightFileText = file.data; **doesn't work, need an alternative**

    };
    $scope.uploadLeftFile = function (file) {

    };
}]);

就像一个注释,我是一个初学角色开发者,所以如果有人想要打击我的Angular技能,请继续,但我主要需要帮助找出如何在上传后访问文件的内容。

如果我们还需要更多细节,请告诉我是否还不够清楚。

1 个答案:

答案 0 :(得分:0)

试试这个:

function handleFiles(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
  $scope.rightFileText = e.target.result; }
  reader.readAsDataURL(file);

}