FormData - 配合Ajax上传文件

☘️ FormData

? FormData- 介绍

使用Ajax发起请求，需要向后台传输数据，可以使用FormData。主要作用如下

• 向后台传输文件
• 传输字段

? FormData - API

append(k,v) - 添加字段

delete(k) - 删除字段

forEach(callback(k,v)) - 遍历

get/getAll - 获取字段

? FormData - 创建

?FormData - 手动创建

// 创建FormData
let formData = new FormData();

// 添加普通字段
formData.append('name','yuki');

// 添加文件 - append(fieldname， file, fileName) - 第三个参数不写，默认是blob 
let fileEle = document.querySeletor("#file");
formData.append(file,fileEle.files[0],fileEle.files[0].value);

? FormData - 自动创建

# 根据form表单创建
let formData = new FormData(document.querySelector("#mainForm"));

? FormData - 配合Ajax上传文件

// 1. init formdata
var formData = new FormData(document.querySelector("#mainForm"));

// 2. ajax
$.ajax({
      url: submitUrl,
      type: 'post',
      contentType: false,  // ContentType设置成false
      processData: false, // 不需要让浏览器对FormData进行转换
      data: formData
  }).done(function (res) {
      console.log(res)
  })

? 参考链接

? FormData 对象的使用
? jQuery.ajax()使用