formData使用总结
2024-09-29 20:25:53
1.formData基本使用
//可以从form元素初始化一个FormData对象,或者new一个空对象
var formData = new FormData([fromElement]); //可以添加一个新的键值对,从form初始化或空对象均可
formData.append(key,value);
//formData上传文件,form要设置enctype为multipart/form-data
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
2.xhr使用formData
var newFormData = new FormData(someFormElement);
var formElement = document.getElementById("myFormElement");
var oReq = new XMLHttpRequest();
oReq.open("POST", "submitform.php");
oReq.send(new FormData(formElement));
还可以在已有表单数据的基础上,继续添加新的键值对,如下:
var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);
oReq.send(formData);
3.jquery使用formData
$.ajax({
url: 'upload01.php',
method: 'POST',
data: formData,
contentType: false,//必须
processData: false,//必须
cache: false //上传文件不需要缓存
})
参数说明:
contentType
jquery ajax的默认值为'application/x-www-form-urlencoded; charset=UTF-8',
如果有input type=“file”,则contentType应该为‘multipart/form-data’,设置为false,不让
jquery设置contentType
processData
jQuery会处理发送的数据,将数据按照'application/x-www-form-urlencoded'的
要求转换为查询字符串,如果要发送的数据是DOMDocument或者不需要处理,就可以设置为false不让jQuery
转换数据,我们这里要发送的数据其实就是DOMDocument
dataType
不要设置为json,让jquery根据http响应头的contentType去判断,返回一个合适的数据类型
4.vue-resource使用formData
var formData = new FormData();
formData.append('foo', 'bar'); this.$http.post('/api', formData)
5.axios使用formData
6.superAgent使用formData
最新文章
- JS逻辑运算符&;&;与||的短路运算
- 【Docker】docker /var/lib/docker/aufs/mnt 目录满了,全是垃圾数据,咋搞?
- 机器学习实战 - 读书笔记(06) – SVM支持向量机
- ThinkPHP中U方法与url的四种访问模式
- Linux学习之路:认识shell和bash
- uc/os 笔记(转)
- Kafka笔记--参数说明及Demo
- swiper,animate使用方法
- cocos2dx进阶学习之CCTMXTiledMap
- Android 手机红外遥控器实现(转)
- JavaScript和DOM
- linux的自有(内置)服务
- Apache Hadoop 2.9.2 的归档案例剖析
- Docker系列10—容器编排工具Docker Compose详解
- Confluence 6 查看内容索引概要
- 008-docker-安装-tomcat:8.5.38-jre8
- [整理].net中的延迟初始化器
- 在ASP.NET MVC4中使用Quartz.NET执行定时任务
- mysql-python安装时mysql_config not found
- no_unnest,push_subq,push_pred的用法 (转)