![](/img/trans.png)
[英]How to send multipart/form-data form content by ajax (no jquery)?
[英]Ajax send multipart/form-data
我的html代碼:
<form:form name="vcfForm" id="vcfForm" method="post" enctype="multipart/form-data" action="../acquaintance/readingContactsFromVcfFile"></form:form>
<input type="file" name="vcfFile" id="vcfFile" form="vcfForm" >
<button type="button" name="vcfSubmit" id="vcfSubmit" form="vcfForm">Upload</button>
我的控制器:
@RequestMapping(value = { "/readingContactsFromVcfFile" }, method = RequestMethod.POST)
public @ResponseBody
ModelMap readContactsFromVcfFile(@RequestParam("vcfFile") MultipartFile file, HttpServletRequest request) throws UserServiceException {
ModelMap modelMap = new ModelMap();
*********************code*****************
modelMap.addAttribute("message", "success");
return modelMap;
}
我的jQuery代碼:
$(document).on('click','#vcfSubmit', function() {
var vcfData = new FormData();
vcfData.append('files[]', $('#vcfForm').get(0).files[0]);
$.ajax({
url : "../acquaintance/readingContactsFromVcfFile?vcfFile="+vcfData,
type : "post",
cache : false,
processData: false,
contentType: false,
success : function(data) {
alert(data.message);
}
});
});
我的問題是,當我單擊“提交”按鈕時,頁面將被提交並返回頁面中顯示的“成功”消息。 使用ajax提交表單或傳遞文件時,我不希望頁面刷新。 我怎么解決這個問題?
html代碼:
<form name="vcfForm" id="vcfForm" method="post" enctype="multipart/form-data" ></form>
<input type="file" name="vcfFile" id="vcfFile" form="vcfForm" >
<button type="button" name="vcfSubmit" id="vcfSubmit" form="vcfForm">Upload</button>
控制器代碼:
@RequestMapping(value = { "/readingContactsFromVcfFile" }, method = RequestMethod.POST)
public @ResponseBody
ModelMap readContactsFromVcfFile(@RequestParam(value = "vcfFile") MultipartFile file, HttpSession session) throws UserServiceException {
ModelMap modelMap = new ModelMap();
modelMap.addAttribute("message", "message");
return modelMap;
}
jQuery代碼:
$(document).on('click','#vcfSubmit',function(){
var vcfData = new FormData($('#vcfForm')[0]);
$.ajax({
url : "../acquaintance/readingContactsFromVcfFile?vcfFile="+vcfData,
type : "post",
data : vcfData,
processData: false,
contentType: false,
cache : false,
success : function(data) {
}
});
});
一切正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.