H5 新增对象

FormData	FileReade	FileList	File

一、FormData

1. FormData 是 Html5 新加进来的一个类,可以模拟表单数据
2. 利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件
3. 可以先通过 new 关键字创建一个空的 FormData 对象，然后使用 append() 方法向该对象里添加字段（字段的值可以是一个 File对象或者字符串，剩下其他类型的值都会被自动转换成字符串)
4. 也可以 new 的同时直接传入表单对象，从而创建有值的FormData对象

• 构造函数
  FormData (optional HTMLFormElement form): (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.
• 方 法
  append(key, value):来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
  get(key)、getAll(key):来获取对应的 value
  set(key, value): 来设置修改数据，如果指定的 key 不存在则会新增一条，如果存在，则会修改对应的value值。
  has(key): 来判断是否对应的 key 值
  delete(key)，来删除数据

二、FileReade

1. 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
2. File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

• 构造函数
  FileReader():返回一个新构造的FileReader。
• 属性
  FileReader.error: 只读,一个DOMException，表示在读取文件时发生的错误 。
  FileReader.readyState: 只读,表示FileReader状态的数字。取值如下：

常量名	值	描述
EMPTY	0	还没有加载任何数据
LOADING	1	数据正在被加载
DONE	2	已完成全部的读取请求

FileReader.result: 只读,文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

• 事件
  FileReader.onabort:处理abort事件。该事件在读取操作被中断时触发。
  FileReader.onerror:处理error事件。该事件在读取操作发生错误时触发。
  FileReader.onload:处理load事件。该事件在读取操作完成时触发。
  FileReader.onloadstart:处理loadstart事件。该事件在读取操作开始时触发。
  FileReader.onloadend:处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
  FileReader.onprogress:处理progress事件。该事件在读取Blob时触发。
• 方法
  FileReader.abort():中止读取操作。在返回时，readyState属性为DONE。
  FileReader.readAsArrayBuffer():开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
  FileReader.readAsBinaryString():开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
  FileReader.readAsDataURL():开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
  FileReader.readAsText():开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

三、FileList

1. 一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件.该类型的对象还有可能来自用户的拖放操作,查看DataTransfer对象了解详情.
2. 如果一个input元素拥有multiple属性,则可以用它来选择多个文件.

<input id="fileItem" type="file">
<script  >
  //  下面的一行代码演示如何获取到一个FileList对象中的第一个文件`File`对象: 
  var file = document.getElementById('fileItem').files[0];
</script>

• 方法
  item(index)：根据给定的索引值.返回FileList对象中对应的File对象.

• 属性
  length:一个只读的整数值,用来返回该FileList对象中的文件数量

四、 File

1. 文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
2. 通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互
3. Web应用程序中使用文件

• 构造函数
  File():返回一个新构建的文件对象（File）。
• 属性
  File.lastModified: 只读返回当前 File 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。
  File.lastModifiedDate: 只读 返回当前 File 对象所引用文件最后修改时间的 Date 对象。
  File.name: 只读返回当前 File 对象所引用文件的名字。
  File.size: 只读返回文件的大小。
  File.webkitRelativePath:只读 返回 File 相关的 path 或 URL。
  File.type:只读 返回文件的 多用途互联网邮件扩展类型（MIME Type）
• 方法
  File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：
  Blob.slice([start[, end[, contentType]]])
  返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。