FormData对象的使用

1. FormData对象的作用

Form对象可以将数据编译成键值对的格式，以便于使用XMLHttpRequest来发送数据，主要用于：

（1）发送表单数据（通过表单元素的name和value组成querystring，实现表单数据的序列化行程），也可以用来发送键值对格式的数据（非表单）。

（2）异步上传二进制文件。

注：如果Form表单中，enctype属性设置为multipart/form-data，则会使用表单的submit()方法来发送数据。

2. FormData对象的创建

（1）创建空对象

var formData = new FormData() //创建一个空的formdata对象

（2）初始化已有对象

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

3. FormData对象的操作方法

（1）添加数据 append( )

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

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

拓展一：FormData的数据格式
FormData中，一条key/value对应一条数据，key值是唯一的，一个key值可以对应多条value值。如果使用表单初始化FormData对象，则每一个表单字段对应一条数据，其中name属性对应key值，value属性对应value值。

key	value
k1	[v1,v2,v3,v4]
k2	v1

（2）获取数据 get( )

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

formData.get("name")  //获取key为name的第一个值
formData.getAll("name")  //获取key值为name的所有值，返回一个数组

（3）修改（设置）数据 set( )

格式：：formData.set（"key","value"）
注意：如果key值存在，则修改对应的value值，若是key不存在，则新增加一条数据；
示例：

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

（4）删除数据 delete( )

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

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

（5）判断数据是否存在 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)
}
//输出结果：
"name : Tester"   "date : 2019-11-29"  "content : Modified the username"

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

4. 上传数据

（1）上传数据

// 上传图片信息
var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...此处省略 ...q"
var formData = new FormData()
formData.append("name","teser.png")
formData.append("createDate",20191129)  //数字会被转成字符串
formData.append("imgURL",base64 )

$.ajax("/upload/php",{
   type:'POST',
   data: formData ,
   dataType:'JSON',
   cache:false ,  //不缓存
   processType:false,  //jquery中不处理数据
   contentType:false,  //jquery中不设置内容
   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]) //将文件转换为二进制 
  //JS创建的file文件 
  var content = "<a href="www.baidu.com">跳转至百度</a>" 
  var bolb = new Blob([content],{type:"text/xml"})
  formData.append("webfile",bolb ,"webfile.txt") 
  //使用append()方法时，第三个可选参数可以设置指定文件的文件名。 
    $.ajax({
        url:'/upload.php', 
        type:'POST', 
        data: formData , 
           ... 
        success:function(){
           ...
        } 
    }) 
})

注：FormData对象的字段类型可以是Blob、File、或者string；如果他的字段类型不是Blob，也不是File，则会被转换成字符串类型。

最后编辑于：2019.11.25 14:13:12