jquery的异步提交表单（异步上传文件）及jquery.form.js上传文件注意事项
2017-06-28 15:12
881 查看
方法一：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。
如果不设置这两个参数无法正常上传文件
还可以用append添加额外的表单数据：
（3）异步请求中的data直接为formData
完整页面代码如下：
方法二：通过插件jquery.form.js中的方法进行提交
（1）引入插件jquery.form.js和jquery-1.7.js插件；
（2）jquery.form.js的ajaxSubmit()方法进行提交；
方法三：通过插件jquery.form.js中的方法进行提交
（1）引入插件jquery.form.js和jquery-1.7.js插件；
（2）jquery.form.js的ajaxForm()方法进行提交；
jquery.form.js上传文件注意事项：
（1）jquery.form.js插件上传文件时，如果选择了文件，没有添加
插件会自动添加，并按照上传文件的格式对请求参数进行编码：
请求类型multipart/form-data， 并且对请求参数进行编码， 有边界符：
Content-Type:multipart/form-data; boundary=—-，
但是如果没有选择文件，则请求头为默认值
contentType ：”application/x-www-form-urlencoded”,不会有边界符，
即jquery.form.js会根据是否有选中文件进行更改请求类型；
（2）如果手动为jquery.form.js请求添加contentType:
如果不选中文件，请求类型为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”，这样无论是否选中文件，后台都能够正确解析请求；
成功请求的信息：
错误请求：请求类型为Content-Type:multipart/form-data，但没有按照相应格式编码，无法解析；
总结：
插件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
（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 + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>异步上传文件（jquery的ajax提交表单数据）</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/common/js/jquery-1.7.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
</body>
<script type="text/javascript">
$(':button').click(function(){
var formData = new FormData($('form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData
$.ajax({
url: '<%=basePath %>upload/ajaxUpload.action',
type: 'POST',
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
}
return myXhr;
},
//Ajax事件
beforeSend: beforeSendHandler,
success: completeHandler,
error: errorHandler,
// Form数据
data: formData,
cache: false,
contentType: false,
processData: false
});
});
function progressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}
}
function beforeSendHandler() {
alert("请求前");
}
function completeHandler() {
alert("请求成功");
}
function errorHandler() {
alert("请求错误");
}
</script>
</html>方法二：通过插件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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.form.js"></script>
<script type="text/javascript">
function submitImgSize1Upload(){
var option = {
type:"post",
url:'${pageContext.request.contextPath}/upload/uploadPic.do',
dataType:'text',
data:{
fileName:'imgSize1File'
},
success:function(data){
var jsonObj = $.parseJSON(data);
$("#imgSize1ImgSrc").attr("src",jsonObj.fullPath);
$("#imgSize1").val(jsonObj.ralativePath);
}
}
$("#itemForm").ajaxSubmit(option);
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改商品信息</title>
</head>
<body>
<form id="itemForm" action="${pageContext.request.contextPath }/items/updateItems.do" method="post">
<input type="hidden" name="id" value="${item.id }"/>
修改商品信息：
<table width="100%" border=1>
<tr>
<td>商品名称</td>
<td><input type="text" name="name" value="${item.name }"/></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" name="price" value="${item.price }"/></td>
</tr>
<tr>
<td>商品生产日期</td>
<td><input type="text" name="createtime" value="<fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/></td>
</tr>
<tr>
<td>商品图片</td>
<td>
<p><label></label>
<img id='imgSize1ImgSrc' src='' height="100" width="100" />
<input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
<input type='hidden' id='imgSize1' name='pic' value='' reg="^.+$" tip="亲！您忘记上传图片了。" />
</p>
</td>
</tr>
<tr>
<td>商品简介</td>
<td>
<textarea rows="3" cols="30" name="detail">${item.detail }</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>方法三：通过插件jquery.form.js中的方法进行提交
（1）引入插件jquery.form.js和jquery-1.7.js插件；
（2）jquery.form.js的ajaxForm()方法进行提交；
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”，如下：
<form id="testForm" method="post" enctype="multipart/form-data"> .... </form>
无论是否选中文件都会按照请求类型为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会自动绑定提交表单事件，这样会出现刷新页面的问题；
<form id="uploadForm" enctype="multipart/form-data"> 文件：<input type="file" name="file"> <button onclick="submitUploadForm()">提交</button><!-- 在form表单里的button会自动绑定提交表单事件，这样会出现刷新页面的问题 --> <input type="button" onclick="submitUploadForm()" value="提交"> </form>
jquery.form.js的帮助文档连接地址http://malsup.com/jquery/form/
$.ajax 和 jquery.form.js实现表单异步提交http://blog.csdn.net/yiyiwudian/article/details/39554731
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【jQuery】Jquery.form.js实现表单异步提交以及文件上传（带进度条）
- 关于使用jQuery-form.js上传文件的注意事项
- jquery.form.js提交form表单 上传文件
- 用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单
- 使用jQuery.form插件实现表单异步提交+上传文件
- 使用jQuery.form插件实现表单异步提交+上传文件
- jQuery.form.js是一个form插件，支持ajax表单提交和ajax文件上传。
- 【文件上传】使用jquery.form.js来实现表单提交
- 关于使用jquery.form.js上传文件同时提交表单的方法
- js提交form表单 - input file 文件上传控制上传文件的大小和格式
- $.ajax 和 jquery.form.js实现表单异步提交
- jQuery.Form.js 异步提交表单使用总结
- jquery表单验证插件 jquery.form.js 支持文件上传~
- 使用jquery插件jquery.form.js，异步提交表单 1
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
- 实现jQuery-form.js实现异步上传文件
- 异步提交表单插件jquery.form.min.js的使用实例
- Java使用form表单上传文件10大需要注意事项
- 使用FormData对包含文件类型的form表单进行异步提交（文件上传）并配置回调
- jquery插件---模拟from表单上传文件，实现异步提交