在 AngularJS 中使用 FileReader 和 DOMParser答案

【问题标题】：Using FileReader & DOMParser in AngularJS在 AngularJS 中使用 FileReader 和 DOMParser
【发布时间】：2014-10-22 20:31:27
【问题描述】：

我有一个用户使用 AngularJS 上传的文件，并且喜欢使用 XML 操作文件内容。但是，我在 DOMParser 识别文本文件时遇到了困难。

index.html

  <div ng-controller = "myCtrl">
      <input type="file" file-model="myFile"/>
      <button ng-click="uploadFile()">upload me</button>
  </div>

app.js

 myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

     $scope.uploadFile = function(){
     var file = $scope.myFile;

     reader = new FileReader();
     reader.onload = function() {
     showout.value = this.result;
     txtFile = showout.value;

     console.log(txtFile);
     };

    reader.readAsText(file);
    parser=new DOMParser();

    xmldoc = parser.parseFromString(txtFile,"text/xml"); 
    console.log(xmlDoc);

在此示例中，txtFile 正确打印到控制台的 Reader.onLoad 中。但是，xmlDoc 显示为未定义。

我应该引用该文件并对其进行转换，以便 DOMParser 可以读取它吗？

注意：如果我在 ... xmldoc = parser.parseFromString("bob","text/xml") 中替换 txtFile，则代码有效。

提前致谢。

【问题讨论】：

标签： javascript angularjs filereader domparser

【解决方案1】：

我知道这是旧的，但我想在这里放一个工作示例，以防人们仍然遇到这个

var parser = new DOMParser();
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
    var data = parser.parseFromString(evt.target.result, "application/xml");
    console.log(data);
};

【讨论】：