Home  >  Article  >  Web Front-end  >  How to read text file content in html

How to read text file content in html

下次还敢
下次还敢Original
2024-04-05 10:33:171373browse

HTML 无法读取文本文件,但使用 JavaScript 可以实现:使用 fetch() 获取文件内容;用 response.text() 方法获取文本;在 then() 方法中处理读取后的响应。

How to read text file content in html

如何使用 HTML 读取文本文件内容

HTML 本身无法直接读取文本文件的内容。然而,通过使用 JavaScript,可以很容易地实现这一功能。

方法:

要读取文本文件的内容,可以使用以下 JavaScript 函数:

<code class="javascript">fetch('textfile.txt')
  .then(response => response.text())
  .then(data => {
    // 对读取到的文本文件内容进行处理
  });</code>

说明:

  • fetch() 函数用于从服务器获取资源(文本文件)。
  • response.text() 方法返回文本文件的文本内容。
  • then() 方法用于处理成功读取文本文件后的响应。

示例:

下面是一个读取文本文件内容并将其显示在网页上的 HTML 代码示例:

<code class="html"><html>
<head>
  <script>
    fetch('textfile.txt')
      .then(response => response.text())
      .then(data => {
        document.getElementById('content').innerHTML = data;
      });
  </script>
</head>
<body>
  <div id="content"></div>
</body>
</html></code>

在这个示例中:

  • textfile.txt 是要读取的文本文件。
  • content 是一个 HTML 元素,它将包含读取到的文本文件内容。

The above is the detailed content of How to read text file content in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn