jquery的异步提交表单（异步上传文件）及jquery.form.js上传文件注意事项
方法一：jquery的ajax方式，通过FormaData获取表单数据
（1）这种方式只需要jquery-1.7.js插件；
（2）通过`jquery中的FormaData类：
自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData；
(3)注意事项（上传文件）：
属性contentType设置为false:
设置为false之后就会使用form表单上的contentType的enctype=“multipart/form-data”；
属性processDataBoolean设置为false：
processDataBoolean(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
如果不设置这两个参数无法正常上传文件
var formData = new FormData($('form')[0]);
还可以用append添加额外的表单数据：
formData.append('b', 3);// 还可以添加额外的表单数据
（3）异步请求中的data直接为formData
success: completeHandler,
error: errorHandler,
data: formData,// Form数据
contentType: false,//使用form的enctype
processData: false
完整页面代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
异步上传文件（jquery的ajax提交表单数据）
方法二：通过插件jquery.form.js中的方法进行提交
（1）引入插件jquery.form.js和jquery-1.7.js插件；
（2）jquery.form.js的ajaxSubmit()方法进行提交；
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
修改商品信息
方法三：通过插件jquery.form.js中的方法进行提交
（1）引入插件jquery.form.js和jquery-1.7.js插件；
（2）jquery.form.js的ajaxForm()方法进行提交,简单实用案例如下；
ajaxForm的简单用法
说明：
ajaxForm预处理将要使用 AJAX 方式提交的表单，将所有需要用到的事件监听器添加到其中。
它不是提交这个表单。
在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。
ajaxForm 需要零个或一个参数。
这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。
是否可以连环调用: 是。
触发条件：
（1）当点击type为submit的按钮时；
（2）调用$("inputForm").submit()时；
jquery.form.js上传文件注意事项：
（1）jquery.form.js插件上传文件时，如果选择了文件，没有添加
contentType : "multipart/form-data",
插件会自动添加，并按照上传文件的格式对请求参数进行编码：
请求类型multipart/form-data， 并且对请求参数进行编码， 有边界符：
Content-Type:multipart/form-data; boundary=----，
但是如果没有选择文件，则请求头为默认值
contentType ：“application/x-www-form-urlencoded”,不会有边界符，
即jquery.form.js会根据是否有选中文件进行更改请求类型；
（2）如果手动为jquery.form.js请求添加contentType:
contentType : "multipart/form-data",
如果不选中文件，请求类型为multipart/form-data，但是由于没有选中文件，并不会按照有边界符那样对请求参数进行编码，这样这个请求传到后台无法被解析即badRequest, 即手动添加之后multipart/form-data，必须选择文件；
（3）上述两种情况都是在form表单上没有添加enctype=“multipart/form-data”，
如果在form表单上添加enctype=“multipart/form-data”，如下：
无论是否选中文件都会按照请求类型为multipart/form-data， 并且对请求参数进行编码， 有边界符：
Content-Type:multipart/form-data; boundary=---- 这样后台能够成功解析数据；
（4）如果文件不是必须上传的最好在在form表单上添加enctype=“multipart/form-data”，这样无论是否选中文件，后台都能够正确解析请求；
成功请求的信息：
Request URL:http://127.0.0.1:8080/BusinessCollaboration/CertificateTrail/upcertificateTrail.do
Request Method:POST
Status Code:200 OK
Remote Address:127.0.0.1:8080
Response Headers
view source
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods:POST, GET, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Content-Type:application/json;charset=UTF-8
Date:Mon, 14 Aug 2017 07:10:18 GMT
Server:Apache-Coyote/1.1
Set-Cookie:JSESSIONID=3B76CBB4E4331614418FDA6503902F19; Path=/BusinessCollaboration; HttpOnly
Transfer-Encoding:chunked
Request Headers
view source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:970
Content-Type:multipart/form-data; boundary=----WebKitFormBoundary4fmP5aWEvpgYodBo
Host:127.0.0.1:8080
Origin:http://127.0.0.1:8020
Referer:http://127.0.0.1:8020/BusinessCollaboration/html/management/upCertificateTrail.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Request Payload
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="id"
59
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="traceCredentialsStr"
afd
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="file"
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="traceSendRule"
sdfwe
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="traceReceiveRule"
67567
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="projectId"
371
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="templateId"
2
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="coordinationSystemId"
24
------WebKitFormBoundary4fmP5aWEvpgYodBo
Content-Disposition: form-data; name="coordinationOrganizationId"
344
------WebKitFormBoundary4fmP5aWEvpgYodBo--
Name
upCertificateTrail.html
bootstrap.min.css
main.css
style.css
jquery-1.11.3.min.js
bootstrap.min.js
angular.min.js
url.js
certificateTrail.js
jquery.form.js
jquery.page.js
nav2.png
btn_80.png
selectdepart.do?templateId=2
selectsystem.do?templateId=2&departid=344
upcertificateTrail.do
32 requests ❘ 1.0 MB transferred
Console
Preserve log
错误请求：请求类型为Content-Type:multipart/form-data，但没有按照相应格式编码，无法解析；
Request URL:http://127.0.0.1:8080/BusinessCollaboration/CertificateTrail/upcertificateTrail.do
Request Method:POST
Status Code:500 Internal Server Error
Remote Address:127.0.0.1:8080
Response Headers
view source
Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods:POST, GET, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Connection:close
Content-Language:zh-CN
Content-Length:923
Content-Type:text/html;charset=UTF-8
Date:Mon, 14 Aug 2017 07:06:53 GMT
Server:Apache-Coyote/1.1
Set-Cookie:JSESSIONID=5B59FEB6F46F3018F2693836138B8FA0; Path=/BusinessCollaboration; HttpOnly
Request Headers
view source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Connection:keep-alive
Content-Length:174
Content-Type:multipart/form-data
Host:127.0.0.1:8080
Origin:http://127.0.0.1:8020
Referer:http://127.0.0.1:8020/BusinessCollaboration/html/management/upCertificateTrail.html
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Request Payload
id=56&traceCredentialsStr=998%E5%9C%B0%E5%BA%9C&file=&traceSendRule=876&traceReceiveRule=768&projectId=371&templateId=2&coordinationSystemId=24&coordinationOrganizationId=344
Name
upcertificateTrail.do
upcertificateTrail.do
2 requests ❘ 2.8 KB transferred
Console
Preserve log
总结：
插件jquery.form.js中ajaxForm和ajaxSubmit的区别：
（1）这两种方法主要的区别是ajaxForm不能主动提交form，函数只是为提交表单做准备需要以submit来触发提交。
（2）而ajaxSubmit会主动提交表单，同时可以在点击其他按钮时也可以触发提交，不一定是submit按钮。
（3）使用ajaxSubmit提交，不能使用button标签绑定异步提交事件，在form表单里的button会自动绑定提交表单事件，这样会出现刷新页面的问题；
jquery.form.js的帮助文档连接地址http://malsup.com/jquery/form/
$.ajax 和 jquery.form.js实现表单异步提交http://blog.csdn.net/yiyiwudian/article/details/39554731