# 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屬性即可：