FormData
顾名思义就是表单数据，我们提交表单所用的数据。Html5里新加了formData对象，可以让我们对表单数据进行操作，甚至自己组装表单对象进行提交。而不单纯仅仅是页面上表单里的元素。
构造函数，返回一个FormData对象
new FormData (form? : HTMLFormElement)
form (可选)
一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.参数可选。
方法
append
给当前FormData对象添加一个键/值对.
void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);
name
字段名称.
value
字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
filename
(可选) 指定文件的文件名
我们可以通过最简单的如下两种
let formData = new FormData();
formData.append("name", "tom");
formData.append("file", input.files[0]);
let formData = new FormData($("#form"));
formData.append("type", "......");
组装出来form数据后我们就可以通过表单或者ajax往后台发送请求了。
还有一个要要注意的是，我们在发送调试的时候在控制台打印这个formData数据发现看不到内容。那么我们可以通过控制台请求的请求头查看表单的数据。如下：
控制台查看到的是空的
控制台请求里看到的
FileReader
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
构造函数
Returns a newly constructed FileReader.返回一个FileReader对象
方法
处理方法
其中我们可以使用readAsDataURL（）在文件读取完毕后读取为base64然后可以实现简单的本地图像预览。
其中，处理方法的主要程序部分如下，将处理封装为函数
// 封装成回调函数
function readFile(file, reader, callback) {
reader.readAsDataURL(file);
reader.onload = () => {
callback(reader.result);
}
}
调用函数，然后修改图片的地址，实现图片的预览。
readFile(this.files[0], new FileReader(), result => {
$(".avater img").attr("src", result)
})
demo地址： FileRader图片预览
