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>
