jQuery当中使用FormData来上传数据

日期：2020-09-01

<script>
    $('#btn').on('click',function(){
      var data = new FormData($('#myForm')[0])  //括号里面必须是DOM对象
      $.ajax({
        type:'post',       //只能是post，所以如果接口文档让用get的时候，就不可以用FormData的方法了
        url:'./08-post.php',
        contentType:false, // 让ajax函数底层不要将发送的数据设置成"application/x-www-form-urlencoded"的格式，因为数据已经是二进制
        processData:false,// ajax函数底层不要将发送给服务器的数据进行字符串的处理
        data:data, // 当前在发送的数据是一个二进制数据
        success:function(res){
          console.log(res);
        }
      })
    })
  </script>

一、好处：

上传文件是以二进制的形式传的，使用FormData方便

二、注意点：

只能用post方式请求，所以注意一下请求方式，所以如果接口文档让用get的时候，就不可以用FormData的方法了

三、拓展：

具体案例点击：（上传文件）

a) 我们上传文件是以二进制形式传递的
b) 我们可以通过表单获取到一个文件对象
c) 然后file.files[0]可以获取文件信息
d) 然后再利用var formData = new FormData() 实例化
e) 然后再利用formData.append(‘upload’, file.files[0])将文件转成二进制
f) 最后将 formData 做为xhr.send(formData)的参数
注意：
修改 php.ini 中的 post_max_size 配置，让服务端可以接受更大的请求体体积
修改 php.ini 中的 upload_max_filesize 配置，让服务端支持更大的单个上传文件