FormData的详解

用途
1. 将form表单的name和value进行组合，实现表单序列化，减少拼接。
2. 异步上传文件

创建一个formData对象

创建一个空对象

//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//可以通过append()方法来追加数据
formdata.append("name","laotie");
//通过get方法对值进行读取
console.log(formdata.get("name"));//laotie
//通过set方法对值进行设置
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu

将表单元素作为参数，实现序列化

var btn=document.querySelector("#btn");
btn.onclick=function(){//获得页面当中的form表单元素var form=document.querySelector("#advForm");//将获得的表单元素作为参数，对formData进行初始化var formdata=new FormData(form);}

将文件作为参数，实现上传文件

//input type=file 的change事件
function myChange(e){//e.target.files 获取到的文件对象let file = e.target.files;let formData = new FormData();formData.append("file",file[0]);//下面就可以使用formData作为data的值发送Ajax请求了//注意 如果是使用jquery的ajax 需要加上这两个属性//contentType: false, //必须false才会自动加上正确的Content-Type,否则服务器无法识别//processData: false,必须false才会避开jQuery对 formdata 的默认处理//XMLHttpRequest会对 formdata 进行正确的处理
}

formData的其他操作方法
1. get(key) ,getAll(ket) 获取值
2. append(key,value) 在数据末尾追加数据
3. set(key,vlaue) 来设置修改数据
4. has(key) 判断是否存在对应的key值
5. delete(key) 删除对象的key 删除后通过get(key)获取到的是null

FormData的详解相关推荐

【JS基础】var formdata=new FormData() 【FormData用法详解】
FormData用法详解简介 FormData 对象的使用: 1.用一些键值对来模拟一系列表单控件:即将form 中表单元素的 name 与 value 组装成一个 queryString 2.异步 ...
JavaScript中 FormData 对象详解
简介: FormData 对象用以将数据编译成键值对,以便用 XMLHttpRequest 来发送数据. 主要用于:发送表单数据,也可用于发送带键数据(keyed data),而独立于表单使用. 如果 ...
FormData用法详解
FormData 对象: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0axz5Om-1642062084001)(https://sfault-image.b0. ...
Multipart/form-data POST文件上传详解
Multipart/form-data POST文件上传详解理论简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...
openstack页面自定义插件使用详解（django、ajax、post）（zTree为例）
2019独角兽企业重金招聘Python工程师标准>>> 感谢朋友支持本博客,欢迎共同探讨交流,由于能力和时间有限,错误之处在所难免,欢迎指正! 如有转载,请保留源作者博客信息. Be ...
Extjs Form用法详解（适用于Extjs5）
为什么80%的码农都做不了架构师?>>> Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Fo ...
【转】HTTP协议详解
原文地址:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html 一.概念协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则 ...
php编译工具知乎,关于知乎回答问题编辑框用Ctrl+V 粘贴图片是如何实现的详解...
貌似我没有像QQ邮箱之类的装知乎的插件是用HTML5的新功能实现的吗? 看了@朱利安的回答,发现我描述的不够清楚我是用QQ截图之类的工具截的图,然后图片本身是保存在剪切板里的,剪切板中保存的*不 ...
Retrofit2 multpart多文件上传详解
原文出处:http://www.chenkaihua.com/2016/04/02/retrofit2-upload-multipart-files.html Retrofit2是目前很流行的andr ...

FormData的详解

FormData的详解

FormData的详解相关推荐

最新文章

热门文章