JavaScript读取本地txt文件按奇偶行渲染为标题和段落的问题

AI 小北

2026-9-28

代码问题排查

参数错误：你已经通过var file = fileInput.files[0]拿到了单个文件对象，调用reader.readAsText()时错误传入了file[0]，该值为undefined，直接导致文件读取逻辑失败，正确参数应为file。
语法错误：map回调函数中的HTML模板字符串没有用反引号`包裹，JS无法识别模板插值语法，直接抛出语法错误导致代码终止执行。
兼容性隐患：直接用硬编码的换行符分割文本只能适配特定操作系统的换行格式，替换为正则split(/\r?\n/)可以同时兼容Windows、macOS、Linux的换行规则。

完整可行实现

首先确保你的页面中有对应的DOM元素：

<!-- 文件选择控件 -->
<input type="file" id="inputfile" accept=".txt">
<!-- 内容渲染容器 -->
<div id="output"></div>

对应的JS逻辑如下：

var fileInput = document.getElementById('inputfile');
fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    // 过滤非txt文件选择
    if(!file || file.type !== 'text/plain') return;
    var reader = new FileReader();
    reader.onload = function(e) {
        var lineList = reader.result.split(/\r?\n/);
        // 可按需添加空行过滤逻辑：.filter(line => line.trim() !== '')
        var resultHtml = lineList.map((val, i) => {
            return i%2 === 0 ? `<h2>${val}</h2>` : `<p>${val}</p>`
        }).join('');
        document.getElementById('output').innerHTML = resultHtml;
    };
    reader.readAsText(file);   
});