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]);
2.取得form对象,作为参数传入到FormData对象中:
<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>
使用FormData提交表单并上传文件?
<!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>