使用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对象提交表单并上传图片

猜你喜欢