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

2023-12-29 21:14:13

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);
	}

文章来源:https://blog.csdn.net/fenyu8/article/details/135295789
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。