javascript - 在 AngularJS 中使用 FileReader 和 DOMParser

Question

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

index.html

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

应用程序.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，则代码有效。

提前致谢。

Answer 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);
};