HTML 5中的文件API怎么读取文本文件内容

使用HTML 5中的文件API读取文本文件内容,效果如图所示。

https://img.mukewang.com/5b5e837f0001949701990101.jpg

慕码人2483693
浏览 1722回答 1
1回答

Qyouu

<!DOCTYPE html><html><head>&nbsp;&nbsp;&nbsp; <meta charset="GB2312">&nbsp;&nbsp;&nbsp; <title>fileReader读取文本文件示例</title></head><body><script language=javascript>&nbsp;&nbsp;&nbsp; var result=document.getElementById("result");&nbsp;&nbsp;&nbsp; var file=document.getElementById("file");&nbsp;&nbsp;&nbsp; //将文件以文本形式进行读入页面&nbsp;&nbsp;&nbsp; function readAsText()&nbsp;&nbsp;&nbsp; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var file = document.getElementById("file").files[0];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var reader = new FileReader();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //将文件以文本形式进行读入页面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader.readAsText(file);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader.onload = function(f)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var result=document.getElementById("result");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //在页面上显示读入文本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; result.innerHTML=this.result;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }</script>&nbsp;&nbsp;&nbsp; <h3>请选择要读取的文本文件:</h3>&nbsp;&nbsp;&nbsp; <input type="file" id="file" />&nbsp;&nbsp;&nbsp; <input type="button" value="读取文本文件" onclick="readAsText()"/><div name="result" id="result">&nbsp;&nbsp;&nbsp; <!-- 这里用来显示读取结果 --></div></body></html>
打开App,查看更多内容
随时随地看视频慕课网APP