FormData

语法

• var formData = new FormData(form)

form--可选， 一个 HTML 上的 <form> 表单元素一一当指定了，这种方式创建的 FormData 对象会自动将 form 中的表单值也包含进去， 包括文件内容也会被编码之后包含进去

例子

第一种方式

• var formData = new FormData() //当前为空
• formData.append('username', 'BetiaStar') // 使用 FormData.append 来添加键/值对到表单里面

第二种方式

• <form id="myForm" name="myForm">
•   <div>
•     <label for="username">输入用户名</label>
•     <input type="text" id="username" name="username">
•   </div>
•   <div>
•     < for="useracc">输入账号:</label>
•     < type="text" id="useracc" name="useracc">
•   </div>
•   <div>
•     <label for="userfile">上传文件:</label>
•     <input type="file" id="userfile" name="userfile">
•   </div>
• <input type="submit" value="Submit!">
• </form>

注意：所有的输入元素都需要有name属性，否则无法访问到值。

• var myForm = document.getElementById('myForm')
• formData = new FormData(myForm)

方法

append()

• 这个方法有两个版本： 一个有两个参数的版本和一个有三个参数的版本
• formData.append(name, value)
• formData.append(name, value, filename)
• name
•   - value中包含的数据对应的表单名称
• value
•   - 表单的值。可以是 USVString 或者 Blob (包括子类型，如 File)
• filename--可选
•   - 传给服务器的文件名称 (一个 USVString ), 当一个 Blob 或者 File 被作为第二个参数的时候， Blob 对象的默认文件名是 "blob"。File 对象的默认文件名是该文件的名称

注意： 如果你指定一个 Blob 作为数据添加到 FormData 对象中，文件名会被放在 "Content-Disposition" 头部(常常会根据浏览器变化而变化)传给服务器

示例

• // 下面的代码创建了一个空的 FormData 对象
• var formData = new FormData()
• // 你可以通过 FormData.append wangle对象里加入键值对
• formData.append('username', 'BetiaStar')
• formData.append('userpic', userfile.files[0], 'betiastar')
• // 跟常规表单数据一样，你可以使用同一个名称添加多个值。例如(为了与 PHP 命名习惯一致在名称中添加了 [])
• formData.append('hobby[]', sing, '唱歌')
• formData.append('hobby[]', dance, '跳舞')
• formData.append('hobby[]', run, '跑步')
• // 这项技术使得多文件上传的处理更加简单，因为所得数据结构更有利于循环

delete()

• formData.delete(name)
• name
•   - 要删除的 Key 的名字
• formDat.delete('username')

entries()

• formData.entries()
• var formData = new FormData()
• formData.append('key1', 'value1')
• formData.append('key2', 'value2')
• for(var iter of formData.entries()) {
•   console.log(iter[0] + ', ' + iter[1])
• }

get()

• formData.get(name)
• name
•   - 将要获取值的键名
• formData.append('username', 'betiastar')
• formData.get('username')

getAll()

• formData.getAll(name)
• name
•   - 将要获取值的键名
• formData.append('hobby', 'sing')
• formData.append('hobby', 'run')
• formData.getAll('hobby')

has()

• formData.has(name)
• name
•   - 将要查询的键名
• formData.append('hobby', 'sing')
• formData.has('hobby')

keys()

• formData.keys()
• var formData = new FormData()
• formData.append('key1', 'value1')
• formData.append('key2', 'value2')
• for(var iter of formData.keys()) {
•   console.log(iter[0] + ', ' + iter[1])
• }

set()

• 该方法有两种使用方式，一个是传入两个参数，一个是传入三个参数
• formData.set(name, value)
• formData.set(name, value, filename)
• name
•   - 字段名称
• value
•   - 字段的值，如果是传入两个参数的方式，那么该值是一个 USVString,如果不是，将被转成一个字符串。如果是传入三个参数的方式，那么该值是一个布尔值 (Blob)， 文件(File)， 或者一个 USVString,如果不是，将被转成一个字符串。
• filename--可选
•   - 当第二个参数传递的是一个blob对象（Blob）或者file对象（File），filename参数就代表传给服务端的文件名（一个USVString）。Blob 对象的默认文件名是 "blob"。
• formData.set('username', 'betiastar')

注意：如果对 FormData 对象插入一个 Blob 对象(Blob),那么发送给服务器的请求头部(header)里的 "Content-Dispositon" 里的文件名称将会根据浏览器的不同而不同。

values()

• formData.values()
• var formData = new FormData()
• formData.append('key1', 'value1')
• formData.append('key2', 'value2')
• for(var value of formData.values()) {
•   console.log(value)
• }