读取文本文件以HTML显示

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

您必须使用File 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>