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

使用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("请选择要导入的文件!");
      		}
	});
	
上一篇:shell--基本语法


下一篇:FormData对象