1、input:file上传类型控制

属性值有以下几个比较常用：

accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。

multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

（1）、accept

只能选择png和gif图片，可以用image/*指定全部图片文件。

<input id="fileId1" type="file" accept="image/png,image/gif" name="file" />

（2）、multiple

多文件上传

<input id="fileId2" type="file" multiple="multiple" name="file" />

（3）、常用MIME类型

后缀名：*.3gpp、*.ac3、audio/ac3、*.asf、allpication/vnd.ms-asf、*.au 、audio/basic、*.css、text/css

*.csv支持的文件格式还是比较多的，不一一例举，可以需要的时候在查询。

2、HTML 5中的文件处理之FileAPI

在众多HTML5规范中，有一部分规范是跟文件处理有关的，在早期的浏览器技术中，处理小量字符串是js最擅长的处理之一。但文件处理，尤其是二进制文件处理，一直是个空白。在一些情况下，我们不得不通过Flash/ActiveX/NP插件或云端的服务器处理较为复杂或底层的数据。今天，HTML5的一系列新规范正在致力于让浏览器具备更强大的文件处理能力.

FileAPI是一些列文件处理规范的基础，包含最基础的文件操作的JavaScript接口设计。其中最主要的接口定义一共有4个：

◆ FileList接口: 可以用来代表一组文件的JS对象，比如用户通过input[type="file"]元素选中的本地文件列表

◆ Blob接口: 用来代表一段二进制数据，并且允许我们通过JS对其数据以字节为单位进行“切割”

◆ File接口: 用来代步一个文件，是从Blob接口继承而来的，并在此基础上增加了诸如文件名、MIME类型之类的特性

◆ FileReader接口: 提供读取文件的方法和事件

这里有两点细节需要注意：

1. 我们平时使用input[type="file"]元素都是选中单个文件，其本身是允许同时选中多个文件的，所以会用到FileList

2. Blob接口和File接口可以返回数据的字节数等信息，也可以“切割”，但无法获取真正的内容，这也正是FileReader存在的意义，而文件大小不一时，读取文件可能存在明显的时间花费，所以我们用异步的方式，通过触发另外的事件来返回读取到的文件内容

接口描述

这4个接口其实并不复杂，也很好理解(接口中的“#Foo”表示任意Foo类型的对象)：

FileList接口

#FileList[index] // 得到第index个文件

Blob接口

#Blob.size // 只读特性，数据的字节数 

#Blob.slice(start, length) // 将当前文件切割并将结果返回

File接口

#File.size // 继承自Blob，意义同上 

#File.slice(start, length) // 继承自Blob，意义同上 

#File.name // 只读属性，文件名 

#File.type // 只读属性，文件的MIME类型 

#File.urn // 只读属性，代表该文件的URN，几乎用不到，暂且无视

FileReader方法

#FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容 

#FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容，并且可以强制选择文件编码 

#FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容 

#FileReader.abort() // 终止读取操作

FileReader事件

#FileReader.onloadstart // 读取操作开始时触发 

#FileReader.onload // 读取操作成功时触发 

#FileReader.onloadend // 读取操作完成时触发(不论成功还是失败) 

#FileReader.onprogress // 读取操作过程中触发 

#FileReader.onabort // 读取操作被中断时触发 

#FileReader.onerror // 读取操作失败时触发

FileReader属性

#FileReader.result // 读取的结果(二进制、文本或DataURL格式) 

#FileReader.readyState // 读取操作的状态(EMPTY、LOADING、DONE)

3、正在写上传代码，H5自带的样式框实在有点丑，还需要后期优化。

收获：先看的时候完全是懵的，后面结合实例，加上自己慢慢照着写，算是有了初步的了解。

困难：input相关的样式修改。

计划：代码量挺少的，就是需要想明白写法，加上样式的优化，计划明天完成任务9。