admin 管理员组

文章数量: 1184232

在写html时，用浏览器读取本地文件

前言

  • 浏览器没有读取本地文件的权限，如果有这个权限，本地文件会特别不安全。
  • 通过http服务器实现
  • 用txt文件举例

解决方法

在本地搭建一个简单的HTTP服务器，然后通过网络协议来访问本地的a.txt文件。这样就可以使用JavaScript从服务器请求文件并在HTML页面中显示它。一种简单的方法是使用 Node.js 的 http-server 模块或者 Python 的 SimpleHTTPServer 模块来启动一个本地服务器。

准备工作

  1. index.html（空文件）
  2. a.txt（任意内容）

实际操作

  1. 安装 Node.js（下载20.10.0版本）
  2. 在存放a.txt文件的目录下，打开命令行并安装一个简单的HTTP服务器，例如http-server模块：
npm install -g http-server
  1. 在命令行中进入存放a.txt文件的目录，然后运行以下命令启动HTTP服务器：
http-server
  1. 在浏览器中打开 http://localhost:8080 （或其他指定的端口），你将会看到目录列表，包括a.txt文件。
  2. 在index.html的HTML文件中，写入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Display a.txt Content</title>
</head>
<body>
    <div id="content"></div>

    <script>
        fetch('http://localhost:8080/a.txt')
            .then(response => response.text())
            .then(data => {
                document.getElementById('content').innerText = data;
            });
    </script>
</body>
</html>
  1. 打开http://localhost:8080后，即可看到a.txt内容显示在网页里。

本文标签： 浏览器 本地文件 服务器 http

版权声明：本文标题：使用浏览器读取本地文件（通过HTTP服务器） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1741135184a2261831.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。