使用 JavaScript 在客户端读取 XML 文件答案

【问题标题】：Reading an XML file on the client using JavaScript使用 JavaScript 在客户端读取 XML 文件
【发布时间】：2014-08-26 16:32:55
【问题描述】：

我对 JavaScript 非常陌生，我正在尝试读取一个 xml 文件，该文件将由用户上传，但在引用该文件时遇到了困难。

最终我会想要解析 XML 内容，更新它，然后再次提供下载。

我的 HTML 文件：

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

controller.js

  myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){    
    $scope.uploadFile = function(){
    var file = $scope.myFile;
    console.log('file is ' + JSON.stringify(file));


    parser=new DOMParser();
    var xmlDoc=parser.parseFromString(file,"text/xml");
    var length=xmlDoc.length;
    console.log(length);

结果：文件是 {"name":"books.xml","lastModifiedDate":"2014-08-26T16:20:03.685Z","size":818,"type":"text/xml"}

长度 xmlDoc.length:undefined

但是上面显示 xmlDoc.length 是未定义的。

非常感谢您的帮助。

【问题讨论】：

标签： javascript xml angularjs parsing file-upload

【解决方案1】：

为了在 Angular 中与 xml 数据进行交互，您可以使用 XML 到 Javascript 映射库 (x2js)。您可以按照以下步骤使用：

从上面的链接安装 X2JS 库

创建自定义工厂以将xml 转换为json，反之亦然

angular.factory('xmlParser', function() { 
  var x2js = new X2JS();
   return {
     xml2json: x2js.xml2json,
     json2xml: x2js.json2xml_str
   }
});

在您的$http 请求中创建一个transformeRequest interceptor，以便在发送前将您的文件数据转换为json

 angular.factory('Data', [$http, 'xmlParser',
    function($http, xmlParser) {
       $http.post('/api/msgs.xml', data, {
       transformRequest: function(data) {
          return xmlParser.xml2json(data);
       }
    })
  });

【讨论】：