Javascript - 读取文件(不是上传的文件,而是与html文件位于同一目录中的文件)

Javascript - reading a file (not uploaded file,but file present in the same directory as the html file)

本文关键字:文件 于同一 html Javascript 读取      更新时间:2023-09-26

我为此尝试了很多,但没有找到答案.如何使用 javascript 或 html 读取文件。我有一个文本文件"sample.txt",里面有一些信息。它与放置html文件的位置位于同一文件夹中,html文件包含处理此文件的html代码。我只想从文件中读取信息并将其显示在某个div或其他任何东西上,我主要想知道如何读取文件。

如有必要,将提供更多信息。

谢谢

首先:JavaScript 在客户端执行。尽管您必须提出AJAX请求才能获取文件的内容。我认为jQuery的load()似乎是实现这一目标的最简单方法。

例如:

$('#theContentElement').load('sample.txt');

你可以在没有jQuery的情况下执行常规的Ajax请求来读取文件。

跟随使用 GET 请求从 myfile 获取数据.txt并将其输出到 DIV 标签和 id 输出

<script>
function ajaxGet()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("output").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","myfile.txt",true);
xmlhttp.send();
}
ajaxGet();
</script>
<div id="output"></div>

您可以使用javascript获取实际的文件内容。下面是使用 jquery 使用 load 函数的示例代码:

$("#YOUR_DIV_ID").load("sample.txt");

这将使用 id 更新div 的内容,YOUR_DIV_ID "sample.txt 的内容