一. 首先我們需要對formdata有所了解
1.FormData可以把它理解成一個虛擬的表單對象,它只有一個方法append,這個可以在瀏覽器console一下就知道了。我們可以通過append向FormData里面添加各種需要提交的數據。
你可以先創建一個空的 FormData
對象,然后使用 append()
方法向該對象里添加字段,如下:var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
二.jquery的 $("form").serialize()和 new FormData表單序列化
$("form").serialize()和 new FormData($(‘#uploadForm‘)[0])都是序列化表單,實現表單的異步提交,但是二者有區別
首先,前者,只能序列化表單中的數據 ,比如文本框等input select等的數據,但是對於文件,比如文件上傳,無法實現,那么這時候,FormData就上場了,
new FormData使用需要有一個注意點,
注意點一:對於jquery的要求是,好像是 版本1.8及其以上方可支持。
另外該對象不僅僅可以序列化文件,一樣可以用作表單數據的序列化,(就是說包含了serialize()的功能);
注意點二:
contentType : false,必須false才會自動加上正確的Content-Type
processData : false,必須false才會避開jQuery對 formdata 的默認處理 ,XMLHttpRequest會對 formdata 進行正確的處理
三.FormData的使用:
1).前台
function save(){
$('#user-form').bootstrapValidator('validate');
var formValid = $('#user-form').data('bootstrapValidator').isValid();
//if(formValid){
var params = new FormData($('#user-form')[0]);
ajax({
url: "@url("/sample/saveMutilFile.action")",
data:params,
type:"post",
mask:true,
/**
*必須false才會自動加上正確的Content-Type
*/
contentType:false,
/**
* 必須false才會避開jQuery對 formdata 的默認處理
* XMLHttpRequest會對 formdata 進行正確的處理
*/
processData:false,
success: function(result){
//刷新文件上傳控件
if(result.data.file1){
$("#f1").fileinput('refresh', {
fileId:result.data.file1.fileId,
fileName:result.data.file1.fileName
});
}
if(result.data.file2){
$("#f2").fileinput('refresh', {
fileId:result.data.file2.fileId,
fileName:result.data.file2.fileName
});
}
if(result.data.file3){
$("#f3").fileinput('refresh', {
fileId:result.data.file3.fileId,
fileName:result.data.file3.fileName
});
}
$("#f4").fileinput('refresh', {
fileId:result.data.fileId,
fileName:result.data.fileName
});
}
});
//}
}
2).后台
public ResultBean save(TbSystemInfo entity, @RequestParam("systemAttachment-file") MultipartFile systemfile) { // 附件保存 long size = systemfile.getSize(); // 獲取文件名 String fileName = systemfile.getOriginalFilename(); }