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

formData使用总结的更多相关文章

  1. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  2. form表单中enctype="multipart/form-data"的作用

    在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...

  3. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  4. multipart/form-data和application/x-www-form-urlencoded的区别

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明:  application/x-www-form-urle ...

  5. H5 FormData对象的使用

    XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...

  6. form表单编码方式设置为multipart/form-data,后台参数出现乱码情况

    一般在上传图片过程中,form中的编码方式一般采用multipart/form-data方式编码,但是后台这取参数时,可能会出现乱码情况:这里后台要采用转换编码方式: 页面: 后台:获取表单元素时,

  7. jquery 通过ajax FormData 对象上传附件

    之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div>   流程图: <input id=& ...

  8. html5 formData上传 针对app端

    function uploadFile() { if ((document.getElementById("file").files[0].size / 1024).toFixed ...

  9. H5的FormData对象完成ajax上传文件multiFile

    最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...

  10. formData上传图片

    ---------------------formData上传图片--------------------- <form id="imageform"> <img ...

随机推荐

  1. 团队作业——项目Alpha版本发布

    ---恢复内容开始--- https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1   https://edu.cnblogs.com ...

  2. Python面向对象(三)

    类的使用:实例化.属性引用 实例化 g1 = Garen('草丛伦1') # 实例化 g2 = Garen('草丛伦2') g3 = Garen('草丛伦3') 类的属性:变量和函数 print(Ga ...

  3. 点击按钮在表格的某一行下,在添加一行(HTML+JS)

    使用js在指定的tr下添加一个新的一行newTr html代码: <table> <tr> <td>用户名:</td> <td><in ...

  4. mysql 定时任务job

    mysql 定时任务job 1.通过show EVENTS显示当前定义的事件 2.检查event_scheduler状态:SHOW VARIABLES LIKE 'event_scheduler' 3 ...

  5. 03_5_static关键字

    03_5_static关键字 1. static关键字 在类中,用static声明的成员变量为静态成员变量,它为该类的公用 变量,在第一次使用时被初始化,对于该类的所有对象来说,static成员变量只 ...

  6. Linux下手动备份还原硬盘主引导记录MBR跟硬盘分区表DPT教程

    Linux下手动备份还原硬盘主引导记录MBR跟硬盘分区表DPT教程 二 18 奶牛 Linux, Ubuntu, Windows 1,885 views查看评论 最近奶牛一直在折腾linux下的gru ...

  7. dev gridview columns代码管理

    进入run designer界面.我们将在代码中设置columns的属性. 类: ViewTriAtt : DevExpress.XtraEditors.XtraUserControl 在类里面设置g ...

  8. python 列表加法"+"和"extend"的区别

    相同点 : "+"和"extend"都能将两个列表成员拼接到到一起 不同点 :   + : 生成的是一个新列表(id改变) extend : 是将一个列表的成员 ...

  9. IOC容器和Bean的配置

     IOC容器和Bean的配置   1        IOC和DI ①IOC(Inversion of Control):反转控制. 在应用程序中的组件需要获取资源时,传统的方式是组件主动的从容器中获取 ...

  10. CentOS 7 安装 配置 Nginx + PHP

    . CentOS 7 下配置 yum 安装 Nginx. 进入/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim ngi ...