使用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>
<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("请选择要导入的文件!");
}
});