HTML JavaScript从文件打印到页面

Question

我有一个小网站的问题(它的目的是作为一个本地网站工作)，我试图创建。我想要它打印文本从本地文本文件到页面上。我想让它像这样显示

<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>