FormData 对象(知识点主要来源于关于 FormData API)
摘自上面来源, 分析的挺好, 我就无耻得搬下来了 FormData 对象的使用(直接看这个有点蒙圈, 建议先看 API 再看这个实战代码好点, 我就是踩过坑的人 …╮(╯▽╰)╭)
通过 FormData 对象可以组装一组用 XMLHttpRequest 发送请求的键 / 值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为 multipart/form-data，则通过 FormData 传输的数据格式和表单通过 submit() 方法传输的数据格式相同, 与普通的 ajax 相比，使用 FormData 的最大优点就是可以异步上传二进制文件
FormData 对象 FormData 对象可以把所有表单元素的 name 与 value 组成一个 queryString, 提交到后台。在使用 ajax 提交时，使用 FormData 对象可以减少拼接 queryString 的工作量
queryString 是查询字符串，http 查询字符串由 url 中？后面的值指定
当页面上的 form 以 GET 方式向页面发送请求数据时 (如数据含有不安全字符，则浏览器先将其转换成 16 进制的字符再传送，如空格被转换成 %20 时) ,web server 将请求数据放入一名为 QUERY_STRING 的环境变量中。Request.queryString 方法是从这一环境变量中取出相应的值，并将被转成 16 进制的字符还原
说了这么多, 还是要先看看兼容性如何, 这么一看, 还好啊(温馨提示: 下图只代表支持程度, 支持归支持, 不一定百分百支持, 所以用到部分方法时不兼容时正常的)
先说说我上面说过的坑是怎么回事吧, 我就按照实战代码写, 然后以为能直接看到我塞进去的东西, 然而 …
var oMyForm = new FormData();
oMyForm.append("name", "Grady");
console.log(oMyForm) // 我以为会输出 Grady 的, 但是返回的是 FormData 对象好吧, 这里打印出 [object FormData] 这玩意,chrome 里长这样子的
咦, 怎么是个空的东西? 我塞进去的数据呢? 然后看到本身那堆方法, 经过我大胆猜测跟虚心求教之后,FormData 本身就这设置, 想要看到属性只能去用方法拿到, 所以 …
var oMyForm = new FormData();
oMyForm.append("name", "Grady");
console.log(oMyForm.get('name'))这里就涉及到兼容性问题了, 如果不兼容的话会输出 TypeError: oMyForm.get is not a function, 如果正常的话就输出 ’Grady’.
下面的代码也是, 我一开始使用猎豹浏览器编辑的, 后来只好转为 chrome 正常写下去
下面我们简单过一下比较常用的方法:
new FormData(form)
参数可选, 一个 HTML 上的 <form> 表单元素——当指定了，这种方式创建的 FormData 对象会自动将 form 中的表单值也包含进去，包括文件内容也会被编码之后包含进去。
formData.get(name)
用于返回 FormData 对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用 getAll()方法。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="myForm" name="myForm">
<label for="name">name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit!" id="submit">
</form>
<p> 你输出的值为:<span id='text'></span></p>
<script type="text/javascript">
var myForm = document.getElementById('myForm'),
text = document.getElementById('text');
myForm.addEventListener('submit', function (e) {e.preventDefault();
var oMyForm = new FormData(myForm)
text.innerHTML = oMyForm.get('name');
}, false);
</script>
</body>
</html>formData.set(name, value, filename)
| 参数 | 描述 |
|---|---|
| name | 字段名称 |
| value | 字段的值，如果是传入两个参数的方式，那么该值是一个 USVString，如果不是，将被转成一个字符串。如果是传入三个参数的方式，那么该值将是一个布尔值（Blob），文件（File），或者一个 USVString，如果不是，将被转成一个字符串 |
| filename | 可选: 传给服务器的文件名称（一个 USVString）。当第二个参数是一个布尔值（Blob）或者文件（File）的时候，Blob 对象的默认文件名是 “blob” |
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="myForm" name="myForm">
<label for="name">name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit!" id="submit">
</form>
<p> 你输出的值为:<span id='text'></span></p>
<script type="text/javascript">
var myForm = document.getElementById('myForm'),
text = document.getElementById('text');
myForm.addEventListener('submit', function (e) {e.preventDefault();
var oMyForm = new FormData(myForm);
oMyForm.set('name', 'abc');
text.innerHTML = oMyForm.get('name');
}, false);
</script>
</body>
</html>formData.append(name, value, filename)
set() 和 append() 的区别在于，如果指定的键已经存在，set()会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
| 参数 | 描述 |
|---|---|
| name | value 中包含的数据对应的表单名称 |
| value | 表单的值。可以是 USVString 或 Blob (包括子类型，如 File) |
| filename | 可选: 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候，Blob 对象的默认文件名是 “blob”。File 对象的默认文件名是该文件的名称 |
getAll()
方法会返回该 FormData 对象指定 key 的所有值。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="myForm" name="myForm">
<label for="name">name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit!" id="submit">
</form>
<p> 你输出的值为:<span id='text'></span></p>
<script type="text/javascript">
var myForm = document.getElementById('myForm'),
text = document.getElementById('text');
myForm.addEventListener('submit', function (e) {e.preventDefault();
var oMyForm = new FormData(myForm);
oMyForm.append('name', 'abcd');
text.innerHTML = oMyForm.getAll('name');
}, false);
</script>
</body>
</html>FormData.entries()
返回一个 iterator 对象，此对象可以遍历访问 FormData 中的键值对。其中键值对的 key 是一个 USVString 对象；value 是一个 USVString , 或者 Blob 对象。
FormData.keys()
返回一个迭代器（iterator），遍历了该 formData 包含的所有 key，这些 key 是 USVString 对象。
FormData.values()
返回一个允许遍历该对象中所有值的 迭代器。这些值是 USVString 或是 Blob 对象。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id="myForm" name="myForm">
<label for="name">name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit!" id="submit">
</form>
<p> 你输出的值为:<span id='text'></span></p>
<script type="text/javascript">
var myForm = document.getElementById('myForm'),
text = document.getElementById('text'),
str = '';
myForm.addEventListener('submit', function (e) {e.preventDefault();
var oMyForm = new FormData(myForm);
for (var pair of oMyForm.entries()) {str += 'entries:' + pair[0] + ',' + pair[1] + ';<br />';
}
for (var key of oMyForm.keys()) {str += 'key:' + key + ';<br />';}
for (var value of oMyForm.values()) {str += 'value:' + value + ';<br />';}
text.innerHTML = str;
}, false);
</script>
</body>
</html>