如何在浏览器中上传和解析 XML

Question

我正在尝试在浏览器中上传一个 XML 文件，然后解析该 XML。在上传的文件上，我可以看到大小正确，但看起来没有数据。

$('#xmlForm').submit(function(event) {
		event.preventDefault();
		var selectedFile = document.getElementById('input').files[0];

		var parser = new DOMParser();
		var doc = parser.parseFromString( selectedFile, "text/xml");
		console.log(doc);
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="xmlForm">
		<input type="file" id="input">
		<input type="submit">
	</form>

解析器基本上对我说：“文档是空的”

我错过了什么？

Answer 1

解析器基本上对我说：“文档是空的”

我错过了什么

在这一行中，您将文件传递给 parser.parseFromString 方法，该方法期望包含要解析的标记的字符串而不是文件。

var doc = parser.parseFromString( selectedFile, "text/xml");

绝不是一个完整的例子，这段代码将使用 FileReader 读取文件的内容

<!DOCTYPE html>
<html>
<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <title></title>
</head>
<body>
    <form id="xmlForm" name="xmlForm">
        <input id="input" type="file"> <input type="submit">
    </form>
    <script>
       var readXml=null;
       $('#xmlForm').submit(function(event) {
           event.preventDefault();
           var selectedFile = document.getElementById('input').files[0];
           console.log(selectedFile);
           var reader = new FileReader();
           reader.onload = function(e) {
               readXml=e.target.result;
               console.log(readXml);
               var parser = new DOMParser();
               var doc = parser.parseFromString(readXml, "application/xml");
               console.log(doc);
           }
           reader.readAsText(selectedFile);

       });
    </script>
</body>
</html>

请参阅：如何在 JavaScript 中读取文本文件