本文共 3560 字,大约阅读时间需要 11 分钟。
FormData
FormData 接口提供了一种表示表单数据的键值对key/value
的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send()
方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为"multipart/form-data"
,它会使用和表单一样的格式。
如果你想构建一个简单的GET
请求,并且通过的形式带有查询参数,可以将它直接传递给URLSearchParams
。
实现了 FormData
接口的对象可以直接在for...of
结构中使用,而不需要调用entries() : for (var p of myFormData)
的作用和 for (var p of myFormData.entries())
是相同的。
formdata的内置函数
FormData.append()
向 FormData 中添加新的属性值,FormData 对应的属性值存在也不会覆盖原值,而是新增一个值,如果属性不存在则新增一项属性值。FormData.delete()
从 FormData 对象里面删除一个键值对。FormData.entries()
返回一个包含所有键值对的iterator对象。FormData.get()
返回在 FormData 对象中与给定键关联的第一个值。FormData.getAll()
返回一个包含 FormData 对象中与给定键关联的所有值的数组。FormData.has()
返回一个布尔值表明 FormData 对象是否包含某些键。FormData.keys()
返回一个包含所有键的iterator对象。FormData.set()
给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。FormData.values()
返回一个包含所有值的iterator对象。通俗理解
将本地数据(.xlsx、.docx等文件)上传或导入数据库,有时候需要使用FormData 对象。FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。
一、创建对象
创建一个FormData对象实例
1、常用的创建
let formData = new FormData();
let formData = new window.FormData();
3、在表单的基础上创建
//根据id获取表单 var form = $("#fromCont");//初始化实例var formData = new FormData(form);// 获取content内容var content= formData.get("content"); //通过append() 方法向对象中添加content键值对formData.append("content",content);
二、操作方法:
formData里面存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value。如果是使用表单初始化,每一个表单字段对应一条数据,它们的HTML name属性即为key值,它们value属性对应value值。
1、获取值//通过get(key)/getAll(key)来获取对应的valueformData.get("value");
2、添加数据
//通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾formData.append("key1", "value1");formData.append("key2", "value2");formData.append("key2", "value3");//获取key1formData.get("key1"); //返回 "value1"formData.get("key2"); //返回 "value2"formData.getAll("key2"); //返回 ['value2','value3']
3、设置、修改数据
//通过set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值。formData.append("key1", "value1");formData.set("key1", "value2");//获取key1formData.get("key1"); //返回 "value2"
4、删除数据
//通过delete(key),来删除数据formData.append("key1", "value1");formData.delete("k1");//获取key1formData.get("key1"); //返回 []
5、判断数据的存在
//通过has(key)来判断是否对应的key值,如果有对应的key值就返回true,如果没有则返回falseformData.append("key1", "value1");formData.has("key1"); // trueformData.has("key2"); // false
三、vue上传文件
//上传文件的input,type设置为file
四、HTML中上传文件
//HTML中//JS中,这里引入了Jquery $('#fileCont').on('change',function(){ var fileObj = $(this).files[0]; if (typeof (fileObj) == "undefined" || fileObj.size <= 0) { //这里是我自己定义的弹框方法 popup({ type:'tip',bg:false,msg:"请选择件",delay:1000,clickDomCancel:true}); return; } var formFile = new FormData(); //加入文件对象,向接口传入两个参数file,id formFile.append("file", fileObj); formFile.append("id", id); var data = formFile; $.ajax({ url:urlCur, data: data, type: "POST", dataType: "json", //上传文件无需缓存 cache: false, //用于对data参数进行序列化处理 这里必须false processData: false, //必须 contentType: false, success: function (res) { if(res.code === 200){ popup({ type:'success',bg:false,msg:"上传成功",delay:1000,clickDomCancel:true}); }else{ popup({ type:'error',bg:false,msg:res.msg,delay:1000,clickDomCancel:true}); } }, }) })
上传文件需要前端后台对比数据,而且文件上传时,可能会遇到一些麻烦,比如前端传值的方法不对、后台接口报500,我们可以打开开发者工具查看NetWork查看请求。
更详细的请查看
转载地址:https://lichen.blog.csdn.net/article/details/115550264 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!