16.7  读取某个文本文件的内容

16.7 读取某个文本文件的内容

在HTML 5页面中，使用接口FileReader中的方法readAsText（）可以将文件以文本编码的方式读取。具体实现的方法与读取图片的方法基本相似，只是读取文件的方式不一样。

本实例的功能是在页面的表单中新建一个“file”类型的<input>元素，功能是获取上传的文本文件。当单击“选择文件”按钮并选中一个文本文件后，在页面中显示该文本文件的内容。实例文件7.html的实现代码如下。

在本实例的代码中，因为在“file”类型的<input>文件上传元素中没有添加属性“multiple”，所以单击“选择文件”按钮后会返回单个“file”文件。

编写JavaScript文件js7.js，在此首先检测浏览器是否支持FileReader对象。如果支持则重构一个新的FileReader对象，并调用该对象的readAsText（）方法将文件以文本编码的方式读入页面中。然后通过“result”属性获取读入的内容，并将该内容赋值给ID号为<artShow>的元素；最后通过该元素将文本文件的内容显示在页面中。文件js7.js的代码如下。

执行效果如图16-9所示。

图16-9 执行效果