在 JavaScript 中读取文本文件
JavaScript 允许网页动态读取和显示元素。在本教程中，我们将学习如何在 JavaScript 中读取文本文件。
Blob 接口的 blob.text() 方法提供了一个承诺，该承诺解析为包含 blob 内容的字符串，解释为 UTF-8。我们可以用它来读取本地文件。
<input> 标签可用于选择所需的文件。选择文件后，我们将使用 blob.text() 函数读取其内容。我们在网页上显示输出。
请参考以下代码。
<!DOCTYPE html>
<html>
<head>
<title>Read Text File Tutorial</title>
</head>
<body>
<input type="file" onchange="loadFile(this.files[0])">
<br>
<pre id="output"></pre>
<script>
async function loadFile(file) {
let text = await file.text();
document.getElementById('output').textContent = text;
}
</script>
</body>
</html>
在上面的例子中，我们创建了一个 file 类型的输入字段，它允许我们提供一个文件作为输入。然后指定一个 <pre> 标签。在 HTML 中，<pre> 元素用于指定包含文本空格、换行符、制表符和 Web 浏览器忽略的其他格式字符的预格式化文本块。JavaScript 代码位于 <script> 标签内。
FileReader 对象允许 Web 应用程序异步读取保存在用户计算机上的文件（或原始数据缓冲区）的内容。我们将使用 FileReader.readAsText() 方法来读取文本文件。
例如，
<!DOCTYPE html>
<html>
<head>
<title>Read Text File Tutorial</title>
</head>
<body>
<input type="file" name="inputFile" id="inputFile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputFile').addEventListener('change', function() {
var file = new FileReader();
file.onload = () => {
document.getElementById('output').textContent = file.result;
}
file.readAsText(this.files[0]);
});
</script>
</body>
</html>
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
