使用浏览器读取本地文件（通过HTTP服务器）

阅读：评论：0

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

前言

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

解决方法

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

准备工作

index.html（空文件）

实际操作

安装 Node.js（下载20.10.0版本）
在存放a.txt文件的目录下，打开命令行并安装一个简单的HTTP服务器，例如http-server模块：

npm install -g http-server

在命令行中进入存放a.txt文件的目录，然后运行以下命令启动HTTP服务器：

http-server

在浏览器中打开 localhost:8080 （或其他指定的端口），你将会看到目录列表，包括a.txt文件。
在index.html的HTML文件中，写入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Content</title>
</head>
<body>
    <div id="content"></div>

    <script>
        fetch('localhost:')
            .then(response => response.text())
            .then(data => {
                document.getElementById('content').innerText = data;
            });
    </script>
</body>
</html>

打开localhost:8080后，即可看到a.txt内容显示在网页里。

本文发布于:2025-03-05 08:39:00，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/1741135183581451.html

上一篇：在浏览器中禁止拖动元素打开新界面

下一篇：iOS 跳转到浏览器打开网页

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

留言与评论（共有 0 条评论）