JS打开本地文本文件演示
出于安全考虑，JS被设置成没有直接读取本地文件的权限，除非用户允许。
通过使用文件 API，web 内容可以要求用户选择本地文件，然后读取这些文件的内容。这种选择可以通过使用 HTML <input type="file"> 元素或通过拖放来完成。
—— MDN
用户在 <input type="file"> 元素中选择的文件或使用拖放方式拖曳到指定接收器的文件，被视为允许打开，此后，JS的文件 API 就可以对文件进行一系列读取操作。FileReader 是一个文件API接口，它允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
以下是实例演示。脚本规定了两种文件格式，如果在打开文件时选择“所有文件”可以突破格式限制，但脚本内部只处理文本类型格式的文件）：
<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[0];
// 如果没有选择文件或文件类型不符合则放弃执行后面的语句
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>
看起来也不特别复杂，核心在于：用户授权（选择了文件）、使用 FileReader API处理文件，最后将处理结果输出。当然，任何API都有自己的规范和方法，需要逐一熟悉方可将其应用于实际场景中。
另外，从 <input type="file"> 元素获得的文件列表页富含很多有用信息，这些信息以对象的形式存储，里面包含文件名、文件类型、文件大小、最后修改时间等等，文件内容则如上述示例那样需要 FileReader API 读取。
前一篇: JS：生成可控范围16进制随机颜色
下一篇: 没有了
发表评论:
评论列表 [0条]
