开发过程中,一个页面中有多个tab页,如果使用表单提交的方式上传文件,到把整个页面都刷新掉,需要采用异步上传的方式,达到局部刷新的目的,不多说了,贴代码:
jquery代码
var formData =new FormData($("#whiteCustomerImportForm" )[0]);
$.ajax({
url:"${ctx}/whitecustomer/wsxdWhiteCustomer/import",
type:"POST",
data:formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType:false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData:false,
dataType:'json',
success:function (data) {
alert(11111111)
},
error:function () {
alert("上传失败!");
}
});
页面
<div id="whiteCustomerImportBox" class="hide">
<form id="whiteCustomerImportForm" action="${ctx}/whitecustomer/wsxdWhiteCustomer/import" method="post"
enctype="multipart/form-data"
class="form-search" style="padding-left:20px;text-align:center;" ><br/>
<input id="uploadFile" name="file" type="file" style="width:330px"/><br/><br/>
<input id="btnBatchRemindImportSubmit" class="btn btn-primary" type="button" onclick="batchImportWhiteCustomer()" value="批量更新"/>
<a href="${ctx}/whitecustomer/wsxdWhiteCustomer/download/whiteCustomerImportTemplate" class="button-bar">下载模板</a>
</form>
</div>
后台
@RequestMapping(value ="import", method = RequestMethod.POST)
@ResponseBody
public Map remindImport(@RequestParam("file") MultipartFile file, Model model) {
return Maps.newHashMap();
}