HTML JavaScript 从文件打印到页面上

Question

我尝试创建的一个小站点（它旨在用作本地站点）有问题。 我希望它将本地 txt 文件中的文本打印到页面上。 我想让它像这样显示，

<script type="text/javascript">
var arr = ['Heading 1','Para1','Heading 2','Para2','Heading 3','Para3'];
var result = arr.map((val, i) => i%2===0 ? `<h2>${val}</h2>` : `<p>${val}</p>`).join('');
document.getElementById('test').innerHTML = result ;
</script>

但我希望它从一个文件中完成，就像这个

<script>
 var fileInput = document.getElementById('inputfile');
 fileInput.addEventListener('change', function(e) {
     var file = fileInput.files[0];
     var reader = new FileReader();
     reader.onload = function(e) {
         document.getElementById('output').innerText = reader.result;
 };
     reader.readAsText(file);   
 });
 </script>

我试图像这样将它们合并在一起

   <script>
    var fileInput = document.getElementById('inputfile');
    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('output').innerHTML = reader.result.split("\n").map((val, i) => i%2===0 ? <h2>${val}</h2> : <p>${val}</p>).join('');
        };
    reader.readAsText(file[0]);   
 });
 </script>

但是有些东西仍然无法正常工作（在选择要读取的文件后，它什么也没做）而且我不确定我做错了什么。 我在 javascript 方面是绿色的，所以我很感激在这方面的任何帮助。

Answer 1

实际上，现在我又读了一遍——你的例子唯一的问题是你使用的是file[0]而不是file

 <input type="file" id="inputfile" /> <p id="output"></p> <script> var fileInput = document.getElementById('inputfile'); fileInput.addEventListener('change', function(e) { var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function(e) { document.getElementById('output').innerHTML = reader.result.split("\\n").map((val, i) => i%2===0 ? `<h2>${val}</h2>` : `<p>${val}</p>`).join(''); }; reader.readAsText(file); // HERE! }); </script>