猿问

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

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

慕码人2483693
浏览 1766回答 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>
0
随时随地看视频慕课网APP

相关分类

API
API接口成功状态码定义 2 回答
我要回答