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

(可选) 指定文件的文件名

FormData 对象的使用

我们可以通过最简单的如下两种

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()方法后返回结果。

构造函数

FileReader()

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图片预览