前几日做了项目，其中有一个模块涉及到上传图片至服务器。今天抽空整理了下，发现越整理涉及的知识点越多，下面例子有参考百度的搜图。
知识点：input file、base64、FileReader、canvas压缩、blob、btoa编码和atob解码、FormData。
html dom节点：
<input type="file">
默认可以选择一个文件。需要上传多张。可以增加multiple="true" 属性。一般使用opacity:0;将默认样式隐藏，然后再重新写其样式。
1、创建对象
var fileReader = new FileReader();
2、判断浏览器是否兼容----ie8下不支持
if( window.FileReader )
3、状态常量
| 常量名 | 值 | 描述 |
| EMPTY | 0 | 为开始读取文件 |
| LOADING | 1 | 文件读取中 |
| DONE | 2 | 文件读取完成 |
在下面例子中，可以分别读取当前状态。
4、属性
| 属性名 | 描述 |
| error | 读取文件时发生错误 |
| readyState | 当前fileReader对象的状态，为上述状态常量的一个 |
| result | 读取到的内容 |
5、方法
| 方法名 | 参数 | 描述 |
| abort | 无 | 中止读取，在非LOADING状态时调用会抛出异常 |
| readAsArrayBuffer | blob/file | 读取为数组，在result中有一个ArrayBuffer对象为读取的内容 |
| readAsBinaryString | blob/file | 读取为二进制，在result中有读取文件的原始二进制 |
| readAsDataUrl | blob/file | 读取为dataUrl，在result中有data:url格式的字符串表示读取的内容 |
| readAsTexx | blob/file , [encoding] | 读取为文本，在result中字符串表示读取的内容 |
6、事件处理
| 事件 | 描述 |
| onabort | 中断时触发 |
| onerror | 出错时触发 |
| onload | 读取成功时触发 |
| onloadend | 读取完成时触发（不论成功是否） |
| onloadstart | 读取开始时触发 |
| onprocess | 读取中触发 |
BASE64:
我们用chrome打开一张图片，在resources里面显示的就是图片的base编码(实际上base编码比原图片稍大)
图片的base64编码也就是将一张图片编码成一个字符串，我们可以用这个字符串给img标签的src赋值，这样我们就可以看到这张图片。
如何编写：
在html中：
<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=">在css中：
background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);优缺点：
优点：1、减少了http请求；2、可以被gzip；3、没有跨域问题；4、无需考虑在更新图片时缓存问题。
缺点：1、ie8以下不支持；2、不论是写在css文件还是html文件中，增加了文件的大小；3、图片大了之后，程序员编码相当困难；
应用：
根据实际需求来选择base64显示图片，或者选择css sprite，或者直接使用png等
一般使用场景：很少被更新，实际尺寸很小，在系统中大量使用。
canvas压缩：
在移动应用场景中，用户上传的图片一般很大，会导致上传时间过长而失败，既浪费时间也浪费流量，更影响用户体验。我们可以使用canvas的drawImage方法的图形裁剪功能。
1、新建image对象，给其src复制base64值，在其监听onload事件；
2、在onload事件方法中新建canvas对象，获取上下文context；
3、设置裁剪比例，调用drawImage方法填充图片。