一、概述
FormData对象的使用：
- 用一些键值对来模拟一系列表单控件：即把form中所有的元素的name与value组成一个queryString。
- 异步上传二进制文件。
二、使用
-
创建一个空对象实例。
var myform = new FormData(); -
使用已有的表单来初始化
<form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密码 <input type="submit" value="提交"> </form>可以使用这个表单元素作为初始化参数，来实例化FormData对象
// 获取页面已有的一个form表单 var form = document.getElementById("myForm"); //HTML结构没有表单元素直接忽略这一句 // 用表单来初始化 var formData = new FormData(form); //HTML结构没有表单元素：var formData = new FormData() // 我们可以根据name来访问表单中的字段 var name = formData.get("name"); // 获取名字 var psw = formData.get("psw"); // 获取密码 // 当然也可以在此基础上，添加其他数据 formData.append("token","kshdfiwi3rh"); -
API操作
3.1、取值
formData.get("name"); // 获取key为name的第一个值 formData.getAll("name"); // 返回一个数组，获取key为name的所有值3.2、添加数据
通过append(key,value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则追加到数据末尾
formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k1", "v1"); formData.get("k1"); // "v1" formData.getAll("k1"); // ["v1","v2","v1"]3.3、设置修改数据
通过set(key,value)来设置修改的数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值
formData.append("k1", "v1"); formData.set("k1", "1"); formData.getAll("k1"); // ["1"]3.4、判断是key是否存在
通过has(key)判断key对应的键值对是否存在，存在返回值为true，不存在返回值为false
formData.append("k1", "v1"); formData.append("k2",null); formData.has("k1"); // true formData.has("k2"); // true formData.has("k3"); // false3.5、删除数据
通过delete(key)删除key对应的键值对
formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k1", "v1"); formData.delete("k1"); formData.getAll("k1"); // []3.6、遍历
3.6.1、每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
3.6.2、返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
3.6.3、返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回
formData.append("k1", "v1"); formData.append("k1", "v2"); formData.append("k2", "v1"); var i = formData.entries(); i.next(); // {done:false, value:["k1", "v1"]} i.next(); // {done:fase, value:["k1", "v2"]} i.next(); // {done:fase, value:["k2", "v1"]} i.next(); // {done:true, value:undefined} -
发送数据到后台
<!--HTML部分--> <form action=""> <label for=""> 姓名: <input type="text" name="name"> </label> <label for=""> 文件：<input id="file" type="file" name="file"> </label> <label for=""> <input type="button" value="保存"> </label> </form>4.1、原生ajax
//原生js上传文件 //获取按钮 var btn = document.querySelector('[type=button]'); //绑定事件 btn.onclick = function () { //获取input标签 var file = document.querySelector('[type=file]'); // 新建FormData对象 var formData = new FormData(); // 取得input标签中的文件。注：input标签中的文件可以选择多个 formData.append('upload', file.files[0]); //创建XMLHttpRequest，用这个来发送数据 var xhr = new XMLHttpRequest; /*初始化HTTP请求参数(请求方式,url,是否同步)*/ xhr.open('post', 'file.php'); /* xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 设置请求头的contentType */ // 监听上传进度 xhr.upload.onprogress = function (ev) { // 事件对象 // console.log(ev); var percent = (ev.loaded / ev.total) * 100 + '%'; console.log(percent); progress.style.width = percent; } xhr.send(formData); xhr.onreadystatechange = function () { //status状态为200 表示请求成功，readystate为4表示对象传递完毕或者准备就绪 if(xhr.readyState == 4 && xhr.status == 200) { } } }4.2、jq ajax
//绑定提交事件 function upload() { //获取form表单元素 var f = document.getElementById("myForm"); //使用表单元素来构造FromData var myform = new FormData(f); $.ajax({ url: "/Library/test/upload", type: "post", dataType: "json", data: myform, cache: false, // 不缓存 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success: function (data) { console.log(data); } }); }4.3、axios
//不需要html板块方式 //注意：input type="file" 需要通过用户主观点击某块元素触发事件，不可页面加载完成调用，被动调用报错：File chooser dialog can only be shown with a user activation.（翻译：文件选择器对话框只能在用户激活时显示。） function upImg(){ const inp = document.createElement("input"); const _this = this inp.type = "file"; inp.click(); inp.onchange = function(e) { console.log(e.target.files[0]); let params = new FormData(); //创建form对象 params.append("file", e.target.files[0]); _this.$axios.post("/api/Base/uploadImg", params).then(res => { console.log(res) }).catch(err => { console.log(err); }); } }
