JS 读取本地文件|极客笔记

JS 读取本地文件

在 web 开发中，有时候我们需要读取用户本地的文件，比如用户选择了一个文件上传到网站，我们需要读取该文件的内容进行处理。在 JavaScript 中，我们可以通过一些 API 来实现读取本地文件的功能。本文将详细介绍如何使用 JavaScript 读取本地文件的方法。

使用 File API

File API 是 HTML5 新增的 API，用于操作文件。通过 File API 我们可以读取用户选择的本地文件的内容。下面是一个简单的示例，演示如何读取用户选择的文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Read Local File</title>
</head>
<body>
    <input type="file" id="fileInput">
    <pre id="fileContent"></pre>

    <script>
        const fileInput = document.getElementById('fileInput');
        const fileContent = document.getElementById('fileContent');

        fileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            const reader = new FileReader();

            reader.onload = function(event) {
                fileContent.textContent = event.target.result;
            };

            reader.readAsText(file);
        });
    </script>
</body>
</html>

在上面的示例中，我们创建了一个包含文件输入框和用于显示文件内容的 <pre> 元素。当用户选择文件后，触发 change 事件，通过 FileReader 对象读取文件内容并显示在页面上。

注意事项

由于涉及到读取用户本地文件，因此在浏览器中运行时会有一些限制。一般来说，浏览器会有跨域安全策略，不允许直接访问用户的本地文件系统。所以在实际开发中，我们需要将网站部署到服务器上才能正常运行。
FileReader API 提供了多种读取文件的方式，包括 readAsText、readAsDataURL、readAsArrayBuffer 等。我们可以根据需要选择不同的读取方式。
File API 还支持一些其他操作，比如获取文件的元数据、判断文件类型等。可以根据具体需求进行选择。