今天完成的任务：

做article新增页面

学习 input:file类型控制

FileReader对象

明天计划的事情：

将图片上传至服务器。

遇到的问题：

暂无。

收获：

input:file

是html5新增的表单上传元素，有如下属性：

1、accept

使用mine类型值，如：accept="image/png,image/gif"

2、multiple

选则多个文件：multiple="multiple"

可在父form中使用enctype="multipart/form-data"开启原生上传效果。

若要清除file，可用value = ""清空值即可。

FileReader对象：

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。可用于在线预览本地文件。FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。这一结果存储在 result属性中。

1.readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

2.readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

3.readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

FileReader 处理事件：

onabort 中断时触发

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 读取完成触发，无论成功或失败

onloadstart 读取开始时触发

onprogress 读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充：

fr.onload = function() {  

    this.result;  

};