JS：打开本地文本文件
<style>.artBox { font-size: 20px; margin: 30px auto; max-width: 1200px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }
.artBox h2 { color: #1a73e8; border-bottom: 2px solid #eee; padding-bottom: 8px; margin-bottom: 20px; }
.artBox > p { margin: 10px 0; line-height: 1.8; text-align: justify; }
.artBox blockquote { background: #f9f9f9; border-left: 4px solid #1a73e8; padding: 15px 20px; margin: 20px 0; color: #555; }
.artBox code { background: #eee; padding: 2px 6px; border-radius: 3px; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.95em; }
.artBox .mid { text-align: center; }
.artBox .right { text-align: right; }
</style>
<div class="artBox">
<p>出于安全考虑，JS被设置成没有直接读取本地文件的权限，除非用户允许。</p>
<blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications">
<p>通过使用文件 API，web 内容可以要求用户选择本地文件，然后读取这些文件的内容。这种选择可以通过使用 HTML <input type="file"> 元素或通过拖放来完成。</p>
<p class="right">—— MDN</p>
</blockquote>
<p>用户在 <code><input type="file"></code> 元素中选择的文件或使用拖放方式拖曳到指定接收器的文件，被视为允许打开，此后，JS的文件 API 就可以对文件进行一系列读取操作。<code>FileReader</code> 是一个文件API接口，它允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。</p>
<p>以下是实例演示。脚本规定了两种文件格式，如果在打开文件时选择“所有文件”可以突破格式限制，但脚本内部只处理文本类型格式的文件）：</p>
<div class="codebox" data-prev="1">
<style>
.pa { margin: 20px auto; width: 1000px; }
.pa textarea { width: 100%; height: 100%; height: 560px; padding: 12px; resize: none; font-size: 16px;}
.pa h1 { text-align: center; }
</style>
<div class="pa">
<h1>打开本地文本文件演示</h1>
<!-- accept属性规定可打开的文件类型 -->
<p><input id="fileOpen" type="file" accept=".txt, .html"></input></p>
<p><textarea id="txtArea"></textarea></p>
</div>
<script>
function openFile(event) {
// event 参数将由浏览器事件管理系统自动注入，下行是检验
// console.log(event.type, event); // → change, Event
const file = event.target.files;
// 如果没有选择文件或文件类型不符合则放弃执行后面的语句
if (!file && !file.type.startsWith('text')) return;
const reader = new FileReader(); // 实例化FileReader对象为reader
// reader加载完成后
reader.onload = () => {
txtArea.value = reader.result; // 显示读取结果
};
// 若reader加载出错
reader.onerror = () => {
txtArea.value = '读取文件时出错'; // 显示错误信息
};
// 关键 ：使用readASText方法读取文件的文本内容
reader.readAsText(file);
}
fileOpen.onchange = openFile; // 选择文件后调用openFile(event)函数
</script>
</div>
<p>看起来也不特别复杂，核心在于：用户授权（选择了文件）、使用 FileReader API处理文件，最后将处理结果输出。当然，任何API都有自己的规范和方法，需要逐一熟悉方可将其应用于实际场景中。</p>
<p>另外，从 <code><input type="file"></code> 元素获得的文件列表页富含很多有用信息，这些信息以对象的形式存储，里面包含文件名、文件类型、文件大小、最后修改时间等等，文件内容则如上述示例那样需要 <code>FileReader</code> API 读取。</p>
</div>
<script type="module">
function loadLineNumFile() {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
script.defer = true;
script.onload = () => addLineNumber();
document.head.appendChild(script);
}
loadLineNumFile();
</script> {:4_191:} 挺好，这个可以直接查看、编辑.html~谢谢马老师精彩分享{:4_190:} 杨帆 发表于 2026-4-7 15:24
挺好，这个可以直接查看、编辑.html~谢谢马老师精彩分享
这个主要还是演示打开本地文件（本例主要处理文本类型格式的文档）。
要想做出可打开、编辑、保存的功能，需要更为复杂而且复杂到不知多少倍的实现机制。最经典的实现案例是 Only Office，它的网页版可以编写 office 套件所能做到的一切。
JS还有一系列的与操作系统接洽的API，统称为文件系统API，通过它们可以做一切事情（前提是基于指定的安全机制，比如 https 协议，同时还需要浏览器的支持——这个也是微软放弃IE的主因之一，IE由于走了极端的发展道路且渐行渐远已经无法和国际标准看齐，尽管它在发展历程中有很多不可忽视的贡献）。 马黑黑 发表于 2026-4-7 19:58
这个主要还是演示打开本地文件（本例主要处理文本类型格式的文档）。
要想做出可打开、编辑、保存的功 ...
（本例主要处理文本类型格式的文档）
怪不得打不开word文件。 红影 发表于 2026-4-7 20:14
（本例主要处理文本类型格式的文档）
怪不得打不开word文件。
Word文档的 type 类型是极度复杂的富文本文档，协议和 text 不一样，打开它需要复杂千万倍的机制。 马黑黑 发表于 2026-4-7 19:58
这个主要还是演示打开本地文件（本例主要处理文本类型格式的文档）。
要想做出可打开、编辑、保存的功 ...
长知识了~谢谢马老师{:4_190:} 杨帆 发表于 2026-4-7 23:09
长知识了~谢谢马老师
{:4_191:} 马黑黑 发表于 2026-4-7 20:36
Word文档的 type 类型是极度复杂的富文本文档，协议和 text 不一样，打开它需要复杂千万倍的机制。
哦哦，那还是别用它打开的好，太费力的不划算。 红影 发表于 2026-4-9 22:04
哦哦，那还是别用它打开的好，太费力的不划算。
不过有人做了一个叫 Only Office 的东东，可以安装，也可以只通过浏览器使用 马黑黑 发表于 2026-4-9 22:25
不过有人做了一个叫 Only Office 的东东，可以安装，也可以只通过浏览器使用
自己电脑里一般都有 Office 的，为什么还要安装这个呢？ 红影 发表于 2026-4-11 16:55
自己电脑里一般都有 Office 的，为什么还要安装这个呢？
那不见得电脑都有 office 软件。
微软的office软件一套少则近1000元，多则好几千甚至上万，一般都不会安装，除非是刚需。我的电脑家用的有六台，没有一台安装微软office，也不装WPS，其中几台安装有永中office和Only Office，公司的安装开源的LibreOffice 马黑黑 发表于 2026-4-11 17:37
那不见得电脑都有 office 软件。
微软的office软件一套少则近1000元，多则好几千甚至上万，一般都不会 ...
那是我弄错了？我咋觉得每调电脑都本来就有office软件，还以为都是随电脑带的呢。 红影 发表于 2026-4-11 20:35
那是我弄错了？我咋觉得每调电脑都本来就有office软件，还以为都是随电脑带的呢。
你说的可能是盗版软件。盗版软件是不用花钱的。由于特殊环境，我们使用盗版软件还浑然不知，但是，像MS Office这一类软件，其实人家老贵了。
顺便说一下，没有免费的 MS Office，如果你没有在上面花钱就能用，肯定用的是盗版的。 马黑黑 发表于 2026-4-11 21:48
你说的可能是盗版软件。盗版软件是不用花钱的。由于特殊环境，我们使用盗版软件还浑然不知，但是，像MS O ...
哦，有着可能，我都没花钱还不知的呢{:4_173:} 红影 发表于 2026-4-12 12:42
哦，有着可能，我都没花钱还不知的呢
像你这样的高知，按理不应该和街道委员会阿姨一个样的认识 马黑黑 发表于 2026-4-12 12:46
像你这样的高知，按理不应该和街道委员会阿姨一个样的认识
那要分领域的，在某些领域我甚至不如街道阿姨，比如做饭，甚至代码{:4_173:} 红影 发表于 2026-4-12 13:58
那要分领域的，在某些领域我甚至不如街道阿姨，比如做饭，甚至代码
这说法俺得消化消化 马黑黑 发表于 2026-4-12 20:01
这说法俺得消化消化
这有什么消化的，这是事实啊。 红影 发表于 2026-4-12 22:59
这有什么消化的，这是事实啊。
理解不了
页:
[1]
2