[转]前端-WebAPI接口-FormData对象的使用(模拟表单用于发送数据及上传文件)
一、概述
FormData对象的使用:
- 用一些键值对来模拟一系列表单控件:即把form中所有的元素的name与value组成一个queryString。
- 异步上传二进制文件。
二、使用
-
创建一个空对象实例。
javascript复制代码var myform = new FormData();
-
使用已有的表单来初始化
html复制代码<form id="myForm" action="" method="post"> <input type="text" name="name">名字 <input type="password" name="psw">密码 <input type="submit" value="提交"> </form>
可以使用这个表单元素作为初始化参数,来实例化FormData对象
javascript复制代码// 获取页面已有的一个form表单 var form = document.getElementById("myForm"); // 用表单来初始化 var formData = new FormData(form); // 我们可以根据name来访问表单中的字段 var name = formData.get("name"); // 获取名字 var psw = formData.get("psw"); // 获取密码 // 当然也可以在此基础上,添加其他数据 formData.append("token","kshdfiwi3rh");
-
API操作
3.1、取值
javascript复制代码formData.get("name"); // 获取key为name的第一个值 formData.getAll("name"); // 返回一个数组,获取key为name的所有值
3.2、添加数据
通过append(key,value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则追加到数据末尾
javascript复制代码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值
javascript复制代码formData.append("k1", "v1"); formData.set("k1", "1"); formData.getAll("k1"); // ["1"]
3.4、判断是key是否存在
通过has(key)判断key对应的键值对是否存在,存在返回值为true,不存在返回值为false
javascript复制代码formData.append("k1", "v1"); formData.append("k2",null); formData.has("k1"); // true formData.has("k2"); // true formData.has("k3"); // false
3.5、删除数据
通过delete(key)删除key对应的键值对
javascript复制代码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返回
javascript复制代码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复制代码<!--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
javascript复制代码//原生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
js复制代码//绑定提交事件 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
javascript复制代码//不需要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); }); } }
作者:juehm
链接:https://juejin.cn/post/6883075569502371848
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
链接:https://juejin.cn/post/6883075569502371848
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
其他参考文章: