读取.txt文件并以 HTML 格式输出<p>(使用 JS)

Question

我尝试了很多可能性，但大多数都不起作用或需要模块，但我不知道如何在香草javascript中做到这一点我真的需要一些帮助。。谢谢(抱歉我英语不好，我是法国人(

我的脚本：(不是真的工作，只是阅读(

<script type="text/javascript">
var fso, ts, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fso.OpenTextFile("pub.txt", 1);
s = ts.ReadLine();
</script>

Answer 1

读取文本文件：

fetch('file.txt')
.then(response => response.text())
.then(text => console.log(text))
// outputs the content of the text file  

使用Jquery：

$("#div7").load("ajax.txt"); 

Answer 2

试试这个吧！

<input type="file" onchange="readFile(this)" />
<script>
function readFile(input) {
let file = input.files[0];
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
document.getElementById("app").innerHTML = `<p>${reader.result}</p>`;
};
reader.onerror = function () {
console.log(reader.error);
};
}
</script>

Answer 3

document.querySelector("input[type='file']").addEventListener("change", function(){
if(this.files[0]){
this.files[0].text()
.then(val => {
document.querySelector("p").textContent = val;
})
}
})

<label>Pick One Text File</label><br/>
<input type="file" accept="text/plain" multiple="false"> <br/>
<label>File Will Show up here in the text box</label><br/><br/>
<p></p>

Answer 4

Edit：这里是一个工作示例https://codepen.io/engeslamadell/pen/WNrVPeG

你试过这个吗

<script type="text/javascript"> 
//this is the input with type file
document.getElementById('inputfile') 
.addEventListener('change', function() { 

var fr=new FileReader(); 
fr.onload=function(){ 
document.getElementById('output') 
.textContent=fr.result; 
} 

fr.readAsText(this.files[0]); 
}) 
</script> 

您也有这些FileReader方法FileReader.readAsArrayBuffer()：读取指定输入文件的内容。result属性包含一个表示文件数据的ArrayBuffer。FileReader.readAsBinaryString()：读取指定输入文件的内容。result属性以字符串形式包含文件中的原始二进制数据。FileReader.readAsDataURL()：读取指定输入文件的内容。result属性包含一个表示文件数据的URL。FileReader.readAsText()：读取指定输入文件的内容。result属性以文本字符串的形式包含文件的内容。此方法可以将编码版本作为第二个参数(如果需要(。默认编码为UTF-8。

来源：https://www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/