1. FormData對象的作用

Form對象可以將數(shù)據(jù)編譯成鍵值對的格式，以便于使用XMLHttpRequest來發(fā)送數(shù)據(jù)，主要用于：

（1） 發(fā)送表單數(shù)據(jù)（通過表單元素的name和value組成querystring宏赘，實現(xiàn)表單數(shù)據(jù)的序列化行程），也可以用來發(fā)送鍵值對格式的數(shù)據(jù)（非表單）。

（2）異步上傳二進制文件。

注：如果Form表單中竞惋，enctype屬性設(shè)置為multipart/form-data，則會使用表單的submit()方法來發(fā)送數(shù)據(jù)灰嫉。

2. FormData對象的創(chuàng)建

（1） 創(chuàng)建空對象

var formData = new FormData() //創(chuàng)建一個空的formdata對象

（2）初始化已有對象

var form = document.getElementsByTagName("form")
var formData = new FormData(form)

3. FormData對象的操作方法

（1）添加數(shù)據(jù) append( )

格式：formData.append("key","value")
示例：

formData.append("name","Tester")
formData.appeng("name","User")

拓展一：FormData的數(shù)據(jù)格式
FormData中拆宛，一條key/value對應(yīng)一條數(shù)據(jù)，key值是唯一的讼撒，一個key值可以對應(yīng)多條value值浑厚。如果使用表單初始化FormData對象，則每一個表單字段對應(yīng)一條數(shù)據(jù)椿肩，其中name屬性對應(yīng)key值瞻颂，value屬性對應(yīng)value值豺谈。

（2）獲取數(shù)據(jù) get( )

格式：formData.get("key") / formData.getAll("key")
示例：

formData.get("name")  //獲取key為name的第一個值
formData.getAll("name")  //獲取key值為name的所有值郑象，返回一個數(shù)組

（3）修改（設(shè)置）數(shù)據(jù) set( )

格式：：formData.set（"key","value"）
注意：如果key值存在，則修改對應(yīng)的value值茬末，若是key不存在厂榛，則新增加一條數(shù)據(jù)；
示例：

formData.set("name","Changer")  //修改
formData.set("date","2019-11-29")  //增加

（4）刪除數(shù)據(jù) delete( )

格式：formData.delete("key")
示例：

formData.delete("date") 
formData.get("date")  //null

（5）判斷數(shù)據(jù)是否存在 has( )

格式：formData.has(“key”)
返回值：如果存在丽惭，返回true击奶；如果不存在，返回false责掏；
示例：

formData.has("date")  //false

（6）遍歷

格式：formData.entries() / formData.values()
示例：

formData.append("name","Tester")
formData.append("date","2019-11-29")
formData.append("content","Modified the username")

for (var [key,value] of formData.entries()){
    console.log(key + ":" + value)
}
//輸出結(jié)果：
"name : Tester"   "date : 2019-11-29"  "content : Modified the username"

for (var value of formData.values()){
    console.log(value)
}
//輸出結(jié)果：
"Tester"  "2019-11-29"  "Modified the username"

4. 上傳數(shù)據(jù)

（1）上傳數(shù)據(jù)

// 上傳圖片信息
var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...此處省略 ...q"
var formData = new FormData()
formData.append("name","teser.png")
formData.append("createDate",20191129)  //數(shù)字會被轉(zhuǎn)成字符串
formData.append("imgURL",base64 )

$.ajax("/upload/php",{
   type:'POST',
   data: formData ,
   dataType:'JSON',
   cache:false ,  //不緩存
   processType:false,  //jquery中不處理數(shù)據(jù)
   contentType:false,  //jquery中不設(shè)置內(nèi)容
   success:function(data){
      console.log(data) 
   }
})

（2）上傳文件

// HTML部分
<form method="post" name="fileinfo" id="fileForm" enctype="multipart/form-data">
  <label>選擇上傳文件：</label>
  <input type="file" name="file" required="" id="selectFile"> 
  <input type="submit" value="上傳該文件">
</form>

//JavaScript 
var form = document.getElementById("fileForm") 
form.addEventListener("submit",function(e){ 
  formData.append("createDate",new Date().getTime()) 
  //選取的文件
  var file =   document.getElementById("selectFile") 
  var formData = new FormData()
  formData.append("file",file.files[0]) //將文件轉(zhuǎn)換為二進制 
  //JS創(chuàng)建的file文件 
  var content = "<a href="www.baidu.com">跳轉(zhuǎn)至百度</a>" 
  var bolb = new Blob([content],{type:"text/xml"})
  formData.append("webfile",bolb ,"webfile.txt") 
  //使用append()方法時柜砾，第三個可選參數(shù)可以設(shè)置指定文件的文件名。 
    $.ajax({
        url:'/upload.php', 
        type:'POST', 
        data: formData , 
           ... 
        success:function(){
           ...
        } 
    }) 
})

注：FormData對象的字段類型可以是Blob换衬、File痰驱、或者string证芭；如果他的字段類型不是Blob，也不是File担映，則會被轉(zhuǎn)換成字符串類型废士。