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

来源：互联网发布：如何提高淘宝店铺销量编辑：程序博客网时间：2024/06/05 10:32

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>

阅读全文

0 0