js实现获取文件信息，渲染显示到页面上（txt文件做为演示）

小余的备忘录

于 2025-06-11 16:42:02 发布

阅读量184

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/shenboyushshh/article/details/148589237

1. html代码

<input type="file" id="fileInput" accept=".txt" />

<pre id="content"></pre>

2. js逻辑代码

const fileInput = document.getElementById('fileInput');
        const contentElement = document.getElementById('content');

        // 尝试从缓存加载内容
        const cachedContent = window.localStorage.getItem('cachedTextFile');
        console.log(cachedContent, 'cachedContent')
        if (cachedContent) {
            contentElement.textContent = cachedContent;
        }
        // 用户选择新文件时更新缓存
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = (e) => {
                const text = e.target.result;
                contentElement.textContent = text;
                window.localStorage.setItem('cachedTextFile', text); // 保存到缓存
            };
            reader.readAsText(file);
        });

4. 演示效果