源代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function readAsText()
{
var file=document.getElementById("file").files[0];
var reader=new FileReader();
reader.readAsText(file);
reader.οnlοad=function(e)
{
var result=document.getElementById("result");
result.innerHTML=this.result;
}
}
</script>
</head>
<body>
请选择文本文件:<input type="file" id="file" /><input type="button" value="显示文本文件" οnclick="readAsText();"/>
<div name="result" id="result">
<!--这里显示文件内容-->
</div>
</body>
</html>
当button的onclick事件触发的时候,调用readAsText函数,首先获取file对象,然后创建一个FileReader实例,并且调用readAsText方法读取文件。在实例的onload事件中,获取成功读取到的文件内容,显示在页面中,这样就能成功的读取文本文件的内容。