今天是周日,又到了每周日晚的先行者课程了。今天晚上的内容是“上传组件”,这个上传组件,其实更应该说是一个功能,上传功能。它几乎没有什么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这个东西才算是真正的讲清楚了,从它的使用方法,从它的历史沿革,从它的产生脉络,来龙去脉。
我建议大家学东西就这样,一路“为什么”的问下去,学下去,这样可以将学到的知识连成一条线,当几条这样的线在你脑子里出现的时候,你的知识树形结构就形成了。