表单是个很麻烦又不能省略的东西。在此总结一些使用表单的小技巧以供查阅。
1. enctype的取值：
-
"application/x-www-form-urlencoded"，默认地，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）； -
"multipart/form-data"，唯一能够发送文件的编码格式,不对字符编码； -
"text/plain"，空格转换为 "+" 加号，但不对特殊字符编码。
2. 关于"multipart/form-data"：
浏览器会把表单中需要提交的项目分隔，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。
<form action="http://server.com/cgi/handle" enctype="multipart/form-data" method="post">
<input type="text" name="submit-name" value="chmod777"><br />
<label>What files are you sending? </label> <input type="file" name="files"><br />
</form>
则有如下body:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"chmod777
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain... contents of file1.txt ...
--AaB03x--
3. 发送出去的数据：
- 数据拼接的位置：
如果method是get，编码后的数据将会被拼接在url中；
其他情况下，数据将会封装到http body中发送到服务器。 - 对于checkbox，发送的数据会类似于：
{ check: c1, check: c2, check: c3 }这种形式，而不是理想的{ check: [c1, c2, c3] }。
4. 如果想在表单中增加一些其他的数据（比如token/id等等），有两种方法：
- 在表单中增加一个
type="hidden"的input元素； - 封装一个FormData对象，并向其中增加一个字段。
5. 介绍一下FormData：
参考资料：FormData -- MDN
参考资料：FormData 对象的使用 -- MDN
1) 构造函数：
new FormData (form? : HTMLFormElement)
- form (可选)
一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框。
2) 方法：
append(): 给当前FormData对象添加一个键/值对。如果这个键已经存在，这个操作会失败，但返回值永远是undefined。void append(name, value/Blob/File[, optional filename]);
以前因为某种安全策略问题，FormData只有append一个方法。FormData类型一旦被创建，是不能被查看和修改的。以下方法均为新增，可在Web Worker中运行。
delete(name)entries()：迭代器get(name): 如果没有值，则返回null。getAll(name): （例如checkbox）一直返回一个数组包含指定key的所有值。has(name): 返回Boolean类型keys()： 迭代器set(name, value[, filename]): 区别于append，会覆盖已存在的值。values(): 迭代器
无需逐一获取$("input").val()，现在你可以基于一个表单元素创建一个FormData，或者从零开始创建，通过get和set重新处理这些数据，然后使用Ajax将数据发送出去。
6. File类型（继承于Blob类型）
太长不讲系列：
File -- MDN
Blob -- MDN
简单说，File对象一旦创建，不可修改，所有属性均为只读。但Blob存在一个方法slice，允许截取其中的一段创建一个新的Blob对象。
查看File对象需要一个FileReader实例。FileReader -- MDN
7. Form元素的行为
- form.submit()
提交表单行为.该行为可以通过submit事件改写：
document.querySelector("form").onsubmit = function (ev) {
ev.preventDefault();
// Your code here
}
- form.reset()
重置表单，可以将表单状态恢复到初始状态（不是空白状态）。
8. 补充：
- 在IE中报错：
SCRIPT******:参数是必须的；
在Chrome中错误为：Maximum call stack size exceeded.（栈溢出）。
这就是为什么建议使用Chrome调试前端页面([doge])。
