使用formData物件提交表單並上傳圖片
阿新 • • 發佈：2019-01-30
FormData 物件，可以把form中所有表單元素的name與value組成一個queryString，提交到後臺。如果把表單的編碼型別設定為：enctype =‘multipart/form-data’,則通過formData傳輸的資料格式和表單通過submit()方法傳輸的資料格式是一樣的。
在使用Ajax提交時，使用FormData物件可以減少拼接queryString的工作量。
如何建立一個FormData物件？
1.建立一個FormData空物件，然後使用append方法新增key/value：
01: var formdata=new FormData();
02: formdata.append('usrName','kevin');
formdata.append('pageNum',currentPage);
//HTML上傳檔案type='file'
formdata.append('ios640',$('#ios640').files[0]);
formdata.append('ios750',$('#ios750').files[0]);
formdata.append('ios1242',$('#ios1242').files[0]); <form name='myForm' id='myForm'>
<input type='text' name='usrName' value='kevin'/>
<input type='file' id='ios640'/>
</form>
<script>
var form=$('#myForm');
var formdata=new FormData(form);
</script><!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<title>使用FormData上傳檔案</title>
<script src='jquery.min.js'></script>
</head>
<body>
<form id='myForm'>
<input type='text' name='usrName' value='kevin'/>
<input type='file' id='ios640'/>
</form>
<script>
var formData=new FormData($('#myForm')[0]);
$.ajax({
url:URL,
type:'post',
data:formData,
dataType:'json',
cache:true,
async:false,
contentType:false,
processData:false,
success:function(result,status,xhr){
console.log(result);
if(result.transStat=='S'){
res=result;
alert('上傳成功！');
location.href='index.html';
}else{
if(result.transStat=='A'){
var conf=confirm(result.respMsg);
if(conf){
window.top.location.href='login.html';
}
}
alert(result.respMsg);
}
},
error:function(xhr,status,error){
alert('狀態'+status+'錯誤原因'+error);
}
});
</script>
</body>
</html>