求点击网页按钮读取本地JSON文件的JavaScript代码

嘿，我来帮你搞定这个需求！首先得明确一个关键限制：出于安全考虑，浏览器不允许JavaScript直接访问本地文件系统的指定路径（比如直接读取C盘某文件夹或下载文件夹里的文件）。不过我们可以通过让用户手动选择文件的方式来实现，这是浏览器认可的安全方案。

下面是完整的可运行代码，包含HTML和JavaScript部分：

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <title>加载本地JSON文件</title>
</head>
<body>
    <!-- 自定义触发按钮 -->
    <button id="loadJsonBtn">点击选择并加载JSON文件</button>
    <!-- 隐藏的原生文件选择框，由按钮触发 -->
    <input type="file" id="fileInput" accept=".json" style="display: none;">
    <!-- 用于展示读取到的JSON内容 -->
    <pre id="jsonContent" style="margin-top: 20px; padding: 10px; background: #f5f5f5;"></pre>

    <script>
        // 获取页面元素
        const loadBtn = document.getElementById('loadJsonBtn');
        const fileInput = document.getElementById('fileInput');
        const jsonContent = document.getElementById('jsonContent');

        // 按钮点击时触发文件选择框
        loadBtn.addEventListener('click', () => {
            fileInput.click();
        });

        // 用户选择文件后的处理逻辑
        fileInput.addEventListener('change', (e) => {
            // 获取选中的第一个文件
            const selectedFile = e.target.files[0];
            if (!selectedFile) return;

            // 二次校验文件是否为JSON格式
            if (!selectedFile.type.includes('application/json') && !selectedFile.name.endsWith('.json')) {
                alert('请选择正确的JSON格式文件哦！');
                return;
            }

            // 创建FileReader对象读取文件内容
            const reader = new FileReader();
            reader.onload = (event) => {
                try {
                    // 解析JSON字符串为JavaScript对象
                    const jsonData = JSON.parse(event.target.result);
                    // 格式化后展示内容，方便阅读
                    jsonContent.textContent = JSON.stringify(jsonData, null, 2);
                    console.log('JSON加载成功：', jsonData);
                } catch (error) {
                    alert('这个文件不是有效的JSON格式，请检查后重试！');
                    console.error('JSON解析出错：', error);
                }
            };

            // 以文本形式读取文件
            reader.readAsText(selectedFile);
        });
    </script>
</body>
</html>

关键细节说明 #

• 自定义按钮+隐藏文件选择框：原生的文件选择框样式不好修改，所以我们用自定义按钮触发它，既保证功能又能灵活控制UI。
• 双重文件校验：通过accept=".json"限制选择范围，再在代码里校验文件类型和后缀，避免用户选错文件。
• FileReader API：这是浏览器提供的安全读取本地文件的API，我们用readAsText读取文件内容，再用JSON.parse转换成可操作的JS对象。
• 错误处理：加入了JSON解析错误的捕获，避免页面崩溃，同时给用户清晰的提示。

重要提示 #

你没法让代码自动读取本地指定路径的文件，这是浏览器的安全机制，防止恶意网站窃取用户本地文件。必须由用户手动选择文件，这是目前唯一合规的方式。

内容的提问来源于stack exchange，提问作者jay