面试题：JavaScript中如何使用File API读取本地文本文件内容

具体步骤：
- 监听文件选择输入框的change事件，当用户选择文件时触发。
- 通过事件对象获取选中的文件列表，通常文件列表中第一个文件就是用户选择的文件（假设只允许选择一个文件的情况下）。
- 创建一个FileReader对象。
- 使用FileReader对象的readAsText方法读取文件内容，该方法接收要读取的文件作为参数。
- 监听FileReader对象的load事件，当文件读取完成时，通过event.target.result获取文件的文本内容。
示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF - 8">
    <title>读取本地文本文件</title>
</head>

<body>
    <input type="file" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.readAsText(file);
                reader.addEventListener('load', function (event) {
                    const text = event.target.result;
                    console.log('文件内容:', text);
                });
            }
        });
    </script>
</body>

</html>

星途面试题库

面试题：JavaScript中如何使用File API读取本地文本文件内容

知识考点

面试题答案