HTML5 File api，读取xml/文本文件并将其显示在页面上？答案

【问题标题】：HTML5 File api, reading in an xml/text file and displaying it on the page?HTML5 File api，读取xml/文本文件并将其显示在页面上？
【发布时间】：2011-08-10 06:52:14
【问题描述】：

我尝试使用从http://www.html5rocks.com/tutorials/file/dndfiles/ 修改的以下代码来读取文本或 xml 文件并显示下面的内容。

<!DOCTYPE html> 
<html> 
<head> 
    <title>reading xml</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head>
<body>
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>

    <script>
      function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList
        for (var i = 0, f; f = files[i]; i++) {

          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              // Print the contents of the file
              var span = document.createElement('span');                    
              span.innerHTML = ['<p>',e.target.result,'</p>'].join('');
              document.getElementById('list').insertBefore(span, null);
            };
          })(f);

          // Read in the file
          //reader.readAsDataText(f,UTF-8);
          reader.readAsDataURL(f);
        }
      }

      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>
</body>

reader.readAsDataText(f,UTF-8);不工作

reader.readAsDataURL(f);以 Base64 显示文件

如何获取要在页面上显示的文本文件？

【问题讨论】：

标签： javascript file html

【解决方案1】：

这可以很容易地使用 javascript XMLHttpRequest() 类：

function FileHelper()
{}
{
    FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom)
    {
        var request = new XMLHttpRequest();
        request.open("GET", pathOfFileToReadFrom, false);
        request.send(null);
        var returnValue = request.responseText;

        return returnValue;
    }
}

...

var text = FileHelper.readStringFromFileAtPath ( "mytext.txt" );

【讨论】：

【解决方案2】：

您需要将编码作为字符串传入；在UTF-8 周围加上引号。另外，它是readAsText，而不是readAsDataText：

reader.readAsText(f,"UTF-8");

或者您可以完全关闭编码，在这种情况下，它将尝试自动检测 UTF-16BE 或 LE，如果不是其中之一，它将默认使用 UTF-8。

reader.readAsText(f);

【讨论】：

谢谢，它现在可以很好地读取 txt 文件。知道为什么在读取 xml 文件时它只打印最外层的孩子吗？
@Sycren 因为您正在使用innerHTML 将其写入文档，这将尝试像解析 HTML 一样解析 XML。如果您想将其作为纯文本插入以便您可以看到所有标记，那么您应该使用类似span.appendChild(document.createTextNode(e.target.result))
我希望可以将 xml 文件加载到页面中，然后使用 jquery 来解析结构。 xml 是一个 sbml 文件（系统生物学标记语言）。然后，这将用于创建一个用于轻松编辑文件的工具。这可能吗？
@Sycren 没有将字符串解析为 XML 的标准方法。但是，Mozilla 的DOMParser 已经成为事实上的标准，Firefox、Safari、Chrome、Opera 和 IE 9 都支持。对于旧版本的 IE，您可以使用MSXML.DOMDocument，在其他旧版本的浏览器中您可以使用data: URI 的 XMLHttpRequest 模拟它。 Here's an example 如何支持所有三种技术。
谢谢，parser=new DOMParser(); xmlDoc=parser.parseFromString(e.target.result,"text/xml");从第一个链接为我纠正了这个