使用Javascript读取本地文本文件

Question

使用Javascript读取本地文本文件

29

我已经阅读了这个主题的一些先前的问题，但我真的需要100%确定！

是否可能从我的本地系统中读取一个 .txt 文件并在我的 HTML 正文中呈现它？

我尝试了几个函数，这里是其中一个：

  function readFile (path) {
  var fso = new ActiveXObject('Scripting.FileSystemObject'),
      iStream=fso.OpenTextFile(path, 1, false);
  while(!iStream.AtEndOfStream) {
      document.body.innerHTML += iStream.ReadLine() + '<br/>';
  }        
  iStream.Close();
}
readFile("testing.txt");

这个文件中的内容大约只有100个单词，我想从文本文件中读取并在我的HTML正文中显示。

如果没有自己的服务器，这是否可能？

- M. El-Set

2个回答

1

请查看下面的代码，它可以自动生成本地txt文件的内容并将其显示为html。祝好运！

<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript">

  var x;
  if(navigator.appName.search('Microsoft')>-1) { x = new ActiveXObject('MSXML2.XMLHTTP'); }
  else { x = new XMLHttpRequest(); }

  function getdata() {
    x.open('get', 'data1.txt', true); 
    x.onreadystatechange= showdata;
    x.send(null);
  }

  function showdata() {
    if(x.readyState==4) {
      var el = document.getElementById('content');
      el.innerHTML = x.responseText;
    }
  }

  </script>
</head>
<body onload="getdata();showdata();">

  <div id="content"></div>

</body>
</html>

- Karim

我该如何将这个内容用于本地变量？例如，如果我想要 var content = extractText()，然后在 window.onLoad() = function() { url: content , ...} 中稍后使用它 - 我需要像 url: content.innerHTML 这样做来引用响应文本吗？ - dko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aminul · Accepted Answer

您可以使用 FileReader 对象来读取文本文件，以下是示例代码：

  <div id="page-wrapper">

        <h1>Text File Reader</h1>
        <div>
            Select a text file: 
            <input type="file" id="fileInput">
        </div>
        <pre id="fileDisplayArea"><pre>

    </div>
<script>
window.onload = function() {
        var fileInput = document.getElementById('fileInput');
        var fileDisplayArea = document.getElementById('fileDisplayArea');

        fileInput.addEventListener('change', function(e) {
            var file = fileInput.files[0];
            var textType = /text.*/;

            if (file.type.match(textType)) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    fileDisplayArea.innerText = reader.result;
                }

                reader.readAsText(file);    
            } else {
                fileDisplayArea.innerText = "File not supported!"
            }
        });
}

</script>

这里是 CodePen 的演示

如果您每次加载应用程序时都有一个固定的文件要读取，那么可以使用此代码：

<script>
var fileDisplayArea = document.getElementById('fileDisplayArea');
function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                fileDisplayArea.innerText = allText 
            }
        }
    }
    rawFile.send(null);
}

readTextFile("file:///C:/your/path/to/file.txt");
</script>