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)
- }
