使用jquery.form.js插件通过ajax异步提交表单数据并上传文件

fenyu8

已于 2023-12-29 17:35:00 修改

阅读量830

点赞数 9

分类专栏： js Web前端文章标签： javascript jquery ajax

于 2023-12-29 17:34:19 首次发布

本文链接：https://blog.csdn.net/fenyu8/article/details/135295789

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Web前端

15 篇文章 0 订阅

订阅专栏

1.引用依赖

<SCRIPT language=JavaScript src="<%=request.getContextPath()%>/include/jquery-1.6.4.js"></SCRIPT>
<SCRIPT language=JavaScript src="<%=request.getContextPath()%>/include/jquery.form.min.js"></SCRIPT>

2.编写表单内容

<form id="uploadForm" enctype="multipart/form-data" method="post" style="display: none;background-color: rgb(242,250,255);"
	  action="<%=request.getContextPath() %>/servlet/imageInvoiceServlet?_actionType=invoiceOcr">
	<input name="orderId" type="hidden" value="<%=orderId%>">
	<input name="businessNo" type="hidden" value="<%=businessNo%>">
	<input name="userToken" type="hidden" value="<%=userToken%>">
	&nbsp;上传发票至影像系统：<input type="file" name="fileInput" id="fileInput" style="width: 500px;"/>
	<a href="javascript:void(0)" id="btnAjaxSubmit" onclick="uploadFile()">&nbsp;提交</a>
</form>

3.通过ajax异步提交表单并上传文件

	// 提交表单并上传文件
	function uploadFile() {
		var options = {
			success:    function() {
				alert('Thanks for your comment!');
				$("#fileInput").val();
				$("#uploadForm").hide();
			} };
		// 将options传给ajaxForm
		$('#uploadForm').ajaxForm(options);
		// 提交表单
		$("#uploadForm").ajaxSubmit(options);
	}