FormData表单数据对象实现文件上传

FormData

1. FormData表单数据对象介绍

1. FormData 是 Html5 新加进来的一个类,可以模拟表单数据 。
2. 可以使用 JQuery 的 $.Ajax 结合 FormData 异步上传二进制文件 。
3. 可以先通过 new 关键字创建一个空的 FormData 对象，然后使用 append() 方法向该对象里添加字段 。
4. 也可以 new 的同时直接传入表单对象，从而创建有值的FormData对象 。

2. FormData在普通表单域中的应用

<form id="upload" method="post" action="">
  <p>用户名：<input type="text" name="username" id="username"  value=""/></p>
  <p>密码：<input type="password" name="pwd" id="pwd" value=""/></p>
  <p>头像：<input type="file" name="pic" id="pic" /></p>
  <input type="button" onclick="send()" value="注册"/>
</form>

function send(){
  // 获取一个form表单对象
  let fm = document.getElementById("upload");
  // 用这个表单对象来初始化FormData对象
  let fd = new FormData(fm);
  // 现在fd里边已经拥有form表单里边全部的数据了，调用axios即可完成传递给服务器端功能
  axios({url:url,method:'post', data: fd)
}

3. FormData上传文件

// 创建一个空的FormData对象
let fd = new FormData();
// fd可以通过调用append()方法给自己添加成员信息
// 语法：fd.append(name,value)
// append():既可以添加普通表单域信息，也可以添加文件表单域信息
let ff = document.getElementById('pic').files[0] // 获得上传附件对象信息
fd.append('username',document.getElementById('username').value)
fd.append('pwd',document.getElementById('pwd').value)
fd.append('pic',ff)
// 通过axios把上传文件传递给服务器端
axios.post(url, fd)

• 结论：

1. FormData既可以创建一个拥有指定form表单的对象，也可以创建一个空对象。
2. FormData+ajax 可以实现文件上传。