标签：errorPlacer form 表单 ajax nbsp var btn data

使用ajax提交form表单【文件上传】

<!-- 导入Excel对话框   begin-->
 <div id="import-dialog" class="dialog" style="height:150px;width:500px;">
    <h2>文件导入</h2>
    <ul id="error-msg" style="display:none;width: auto;"><li></li></ul>	
    <div class="content" style="height:140px;">
       <form action="***/***/***/importFile" method="post" name="importForm" id="importForm" enctype="multipart/form-data">
		  <div class="content" style="padding-top:5px;padding-bottom:5px">
			<ul class="three-column">
				<li class="clearfix">
					<label></label>
					<div><input type="file" id="importfile" name="importfile" size="45" style="height: 21px;"/></div>
				</li>
				<li class="clearfix">
					<label></label>
					<b>只能导入.xls类型的文件</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a id="template" onclick="template()" title="下载模板">下载模板</a>
				</li>
			</ul>
		  </div>
	<input name="csrf_token" type="hidden" value="${sessionScope._token}" /></form>
    </div>
    <div class="buttons">
        <a href="javascript://" id="btn-form-import" data-btn="btn"><img src="${base }/images/form-button-ok.png" /><fmt:message key="button.ok" /></a>
        <a href="javascript://" data-btn="btn" id="btn-form-import-cancel" class="close"><img src="${base }/images/form-button-cancel.png" /><fmt:message key="button.cancel" /></a>
    </div>
</div>

<!-- 提示对话框 -->
<div class="dialog" id="dialog" style="width:30%;">
	<h2>提示</h2>
	<div id = "threat"></div>
	<div class="buttons">
		<a href="javascript://" id="close_threat" data-btn="btn" class="close" ><img src="${base }/images/form-button-cancel.png" />关闭</a>
	</div>
</div>

	//上传文件表单
	$('#btn-form-import').click(function(){
		var $submitId = $("#btn-form-import"); 
			$submitId.btn("disable");//锁定按钮避免重复提交
		//首先验证文件名是否合法
		var fileName=$("#importfile").val();
			var start=fileName.lastIndexOf("\\");
			var trueName=fileName.substr(start+1); 
			var dot = trueName.lastIndexOf('.');
		  	if ((dot >-1) && (dot < (trueName.length))) {
		  		var dotName = trueName.substring(dot);
              	if(dotName!=".xls" ){
              		$.errorPlacer.clear();
  	 				$.errorPlacer.show("只可导入xls文件！");
              	}else{
              		//var form = $("#importForm").submit();//无需返回值可直接提交
              		 var form = new FormData(document.getElementById('importForm'));
              		$.ajax({
                        url:"***/***/***/importFile",
                        type:"post",
                        data:form,
                        processData:false,
                        contentType:false,
                        success:function(data){
		              		console.log(data);
        					 $("#threat").html(data);
        					$("#dialog").dialog({load:true}).load();//弹出对话框
        					$submitId.btn("enable");
        					$("#close_threat").click(function(){
        						window.location.href = "***/***/***/main";
        					}); 
                        }
                    });
              	}
      		}else{
	      		$.errorPlacer.clear();
				$.errorPlacer.show("请选择要导入的文件！");
      		}
	});
	

标签：errorPlacer,form,表单,ajax,nbsp,var,btn,data
来源： https://blog.csdn.net/qq_43093590/article/details/122345361

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。