失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 使用formData对象提交表单并上传图片

使用formData对象提交表单并上传图片

时间:2024-07-08 04:35:56

相关推荐

使用formData对象提交表单并上传图片

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>

如果觉得《使用formData对象提交表单并上传图片》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。