学东西要不断问为什么，要求“甚解”--本周日晚先行者课程简记

今天是周日，又到了每周日晚的先行者课程了。今天晚上的内容是“上传组件”，这个上传组件，其实更应该说是一个功能，上传功能。它几乎没有什么ui交互界面，顶多也就是一个按钮。所以这一期的ui界面不是我们的重点。

就这么个东西，一个input标签而已，就不搞什么dom生成之类的了，直接讲重点，html5的新api，FileReader对象。

说FileReader这个东西，之前没有的。它把文件读入内存，获得文件中的数据，直接展示在页面中，这就实现了“前端页面直接预览图片文件”。

这样就减少了修改已经上传的图片时，对数据库的操作了。其实就是真正上传之前在本页面上预览要上传的图片而已。

然后简单的介绍了下它的原因、方法和事件，画了一个图，就下面这个，

然后演示了一个例子，讲了一下FileReader对象的使用方法。按说到这里，今晚的课程就可以结束了。因为事情已经讲清楚了。

////////

但我觉得还可以再深入一下，

readAsDataURL 我们主要通过它来读取选中的图片文件，刚才说的，它的作用是把文件读取成为一串dataurl，那这个dataurl又是什么？

接下来再问，那这个base64又是什么？

不断的深入问“为什么”...

////////

到这一步就可以结束了吗？当然不是，

历史上，JavaScript无法处理二进制数据，ECMAScript 5引入了Blob [blɑ:b] 对象，允许直接操作二进制数据。

Blob对象是一个代表二进制数据的基本对象。

在它的基础上，又衍生出一系列相关的API，用来操作文件。

File对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；

FileList对象：File对象的网页表单接口；

FileReader对象：负责将二进制数据读入内存内容；

URL对象：用于对二进制数据生成URL。

到这里，引出我最终想说的内容，“咱们今天晚上讲的filereader对象，其实就是从blob对象来的。而这个blob对象，是为解决二进制数据而加入的。”

这时，刚才那个FileReader的图就变成了下面这样，

////////

这时，我觉得FileReader这个东西才算是真正的讲清楚了，从它的使用方法，从它的历史沿革，从它的产生脉络，来龙去脉。

我建议大家学东西就这样，一路“为什么”的问下去，学下去，这样可以将学到的知识连成一条线，当几条这样的线在你脑子里出现的时候，你的知识树形结构就形成了。