jquery的异步提交表单（异步上传文件）及jquery.form.js上传文件注意事项

最新推荐文章于 2023-07-14 10:43:35 发布

menghuanzhiming

最新推荐文章于 2023-07-14 10:43:35 发布

阅读量7.1k

点赞数 3

分类专栏： jquery 上传文件 ajax 文章标签： jquery ajax jquery-form-js

本文链接：https://blog.csdn.net/menghuanzhiming/article/details/73847516

版权

jquery 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

ajax

6 篇文章 0 订阅

订阅专栏

上传文件

2 篇文章 0 订阅

订阅专栏

方法一：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 + "/";
%>
<!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()方法进行提交,简单实用案例如下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/jquery.form.js" ></script>
		<script type="application/javascript">
			$(function() {
				$("#inputForm").ajaxForm();
				$("#submitBtn").click(function() {
					$("#inputForm").submit();
				});
			})
			
		</script>
		<title>ajaxForm的简单用法</title>
	</head>
	<body>
		<h1>说明：</h1>
		<p>ajaxForm预处理将要使用 AJAX  方式提交的表单，将所有需要用到的事件监听器添加到其中。</p>
		<p>它不是提交这个表单。 </p>
		<p>在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 </p>
		<p>ajaxForm 需要零个或一个参数。</p>
		<p>这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。</p>
		<p>是否可以连环调用: 是。</p>
		<h1>触发条件：</h1>
		<p>（1）当点击type为submit的按钮时；</p>
		<p>（2）调用$("inputForm").submit()时；</p>
		<br />
		</p>
		<form id="inputForm" action="http://127.0.0.1:8020/jquery/index.html">
			姓名：<input type="text" name="name" value="" class="required"/>
			年龄：<input type="text" name="age" value=""/>
			<input type="submit" value="提交"/>
			<button type="button" id="submitBtn">提交按钮</button>
		</form>
	</body>
</html>

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

menghuanzhiming

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jquery的异步提交表单（异步上传文件）及jquery.form.js上传文件注意事项

方法一：jquery的ajax方式，通过FormaData获取表单数据（1）这种方式只需要jquery-1.7.js插件；（2）通过`jquery中的FormaData类：自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE&lt;=9不支持FormData；var formData = new FormData($('form')[0]);还可以用append添加额外
复制链接

扫一扫

专栏目录