# 1、FormData对象介绍 FormData：字母意思就是表单数据，这是h5中新增的一个内置对象（构造器），它可以获取任何类型的表单项的值，比如text/radio/checkbox/file/textarea，适用于获取大量的表单项的值。常用于发送Ajax请求。 优点：简单的代码，就能将表单中所有类型的数据都收集到，包括文件域的内容，非常方便。 缺点：因为是h5新增，所以IE9+才支持。 # 2、使用FormData收集表单数据并异步发送到服务器 创建06FormData.html  当点击button的时候，发送Ajax请求到06FormData.php.并将表单中的各项数据发送到服务器。  06FormData.php，将收集到的数据存放到文件中，用于检测是否接受到了数据：  点击button，发现php文件能够收到数据。 注意点： * 必须使用post请求，并使用FormData的时候，不用设置请求头 xhr.setRequestHeader(); * 有文件域，但是不用设置enctype。 * 获取表单的内容使用$_POST，获取文件域的内容使用$_FILES * 收集表单项的值是根据表单项的name值获取的 # 3、使用FormData完成异步上传 还使用06FormData.html和06FormData.php即可。只需要修改PHP文件即可。  # 4、异步上传实现进度条效果 ## 4.1、准备工作 复制原来的06FormData.html为07FormData.html。复制06FormData.php为07FormData.php 因为是本地，上传速度非常快，所以上传一个小文件看不出进度条。所以上传大文件。上传大文件就需要修改php.ini，主要修改三个max。    修改完毕，重启Apache。 ## 4.2、分析Ajax对象中的upload 在创建Ajax对象之后，输出AJax对象，发现有upload属性。 继续输出upload属性（console.log(xhr.upload);），发现有一个onprogress事件，这个事件就和上传进度有关。 下面添加onprogress事件：  输出结果如下：  ## 4.3、制作进度条 首先，在HTML中加入一个progress标签，它是h5中的一个新标签，表示上传进度。  下面在上传过程中，设置progress的max和value属性即可：