JavaScript通过FileReader接口读取文件的知识点主要涵盖了如何使用FileReader对象来读取本地文件系统中的文件，其中重点介绍了使用readAsDataURL方法来预览图片文件。这一过程涉及到前端开发中的文件操作与DOM操作，是Web开发中经常需要处理的功能之一。
FileReader接口是Web应用中处理文件读取操作的一个接口，它提供了一组用于读取文件内容的异步API。开发者可以使用FileReader来读取用户在客户端通过<input type="file">控件选择的文件。在本例中，我们看到的是如何读取图片文件，并将其转换为DataURL格式，然后将图片显示在页面上。
下面是实现这一功能的关键步骤和相关知识点：
1. 检测浏览器对FileReader的支持：在使用FileReader之前，我们需要判断浏览器是否支持这个接口。如果浏览器不支持，可以给出提示信息。在示例代码中，使用了typeof操作符来检测FileReader是否已被定义。
2. 选择文件并检查文件类型：当用户选择文件后，首先需要检查上传的文件是否为图片。在代码中，使用正则表达式来测试文件的MIME类型是否以'image/'开头，这表明该文件是图片类型。
3. 创建FileReader实例并使用readAsDataURL方法：创建FileReader对象后，调用readAsDataURL方法开始异步读取操作。readAsDataURL方法会读取指定的Blob或File对象中的内容，并将其转换为DataURL（即一个data: URL格式的base64字符串）。
4. 读取完成的处理：readAsDataURL方法读取文件是异步的，所以需要在FileReader的onload事件处理函数中处理读取成功后的结果。在这个函数中，可以通过this.result属性获取到转换成DataURL格式的文件内容，并将其赋值给一个<img>标签的src属性，从而在页面上显示图片。
5. 页面中实现的用户交互：整个用户交互的过程包括一个文件选择控件和一个按钮。用户通过文件选择控件选择文件后，点击“读取图像”按钮触发readAsDataURL函数，之后图片就会被显示在页面上。
需要注意的是，这个过程是在客户端浏览器中完成的，不涉及服务器端的文件操作。因此，这种方法适用于处理不需要服务器干预的文件读取和显示。
本示例代码中还有一小段内容提到了文档的编码设置<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>，这表示文档使用GB2312编码，确保中文字符能够正确显示。
通过FileReader接口读取文件并使用readAsDataURL方法预览图片是一个前端开发中非常实用的技能，它允许用户在客户端直接预览文件内容，而无需上传到服务器端，对于提升用户体验是非常有帮助的。
