使用FileReader&AngularJS中的DOMParser

Using FileReader & DOMParser in AngularJS

本文关键字：AngularJS 中的 DOMParser amp FileReader 使用      更新时间：2023-09-26

我有一个用户使用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可以读取它吗？

注意：如果我在中替换txtFile。。。xmldoc=parser.parseFromString（"bob"，"text/xml"），代码就可以工作了。

提前谢谢。

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

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);
};
相关文章：