Question

我只是在网站上工作以获得乐趣，我想知道您是否可以使用JavaScript来读取本地文本文件然后将其显示为HTML。因此，例如，如果我的项目保存了一个文本文件，那么我可以用JavaScript编写一个函数来读取整个文件，然后只显示网页上的所有文本吗？

我环顾四周，试图找到能做到这一点的事情，但我不认为我完全理解。我有：

function readFile(fileName){
   var fileRead = new ActiveXObject('Scripting.FileSystemObject');
   text = fileRead.OpenTextFile(fileName, 1, false, 0);

   while(!text.AtEndOfSteam){
       text += text.ReadLine();
    }

   text.Close();    
}

我不知道这是否有用或做我想做的事。所以我的问题是，如何使用JavaScript读取文本文件，然后在HTML网页上显示该文本文件的内容？

Answer 1

您必须使用文件API。

var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();
    
    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }
});

<input type="file" id="myFile">

<div id="output"></div>

修改

阅读完评论后，我认为这就是你想要的。

var output = document.getElementById("output");

$("a").on("click", function (e) {
  e.preventDefault();
  $.ajax(this.href).done(function(data) {
    output.textContent = data;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

<a href="link/to/file">Link to file</a>

Answer 2

<html>
  <head>
    <title>reading file</title>
   </head>
<body>


<input type="file" id="myFile">
<hr>
<!--<div style="width: 300px;height: 0px" id="output"></div>-->
<textarea style="width:500px;height: 400px" id="output"></textarea>

<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }
});
</script>
  </body>
</html>

读取文本文件以HTML格式显示

2 个答案: