表单提交时编码类型enctype详解
很早以前,当还没有前端这个概念的时候,我在写表单提交完全不去理会表单数据的编码,在action
属性里写好目标URL,剩下的啊交给浏览器吧~但是现在,更多时候我们都采用Ajax方式提交数据,这种原始的方式仅仅被当成优雅降级的产物。
当我们用异步方式提交表单,就需要稍微关注一下表单数据的编码问题了。回想一下,在写回调函数时是不是有根据过请求的Content-Type
写不同业务逻辑的经历,那这个Content-Type
和表单的编码有什么联系吗?有没有在明明前端已经发数据给后端了,后端的小伙伴死活取不到数据的情况?这些纠结的问题背后的原因真是困扰了我好久,今天在篇文章里就要把它们掰扯清楚!
是什么决定了表单的编码?
熟悉表单元素<form>
的小伙伴,对其中的属性enctype
一定不会陌生,就是它规定了对表单提交给服务器时表单数据编码的内容类型(Content Type)。以下引用,摘自HTML 4.01规范的Form章节:
enctype = content-type [CI]
This attribute specifies the content type used to submit the form to the server
content type?这不就是我们在回调函数里判断返回数据的类型,并且是在请求头中的那个玩意儿吗?!没错!就是它!根据HTML 4.01规范的基础数据类型的说明,这个content type指定了连接资源的属性,同时也是MIME type的那些媒体类型。
表单编码类型
知道了表单编码由enctype
决定的,那么它究竟有多少可选的取值呢?是不是所有的MIME类型它都能用呢?
实际上,根据HTML5 规范中所叙述的,enctype
具有以下三种选项,其中最后一项text/plain
是相比4.01新增的。
application/x-www-form-urlencoded
multipart/form-data
text/plain
application/x-www-form-urlencoded
这是默认的编码类型,使用该类型时,会将表单数据中非字母数字的字符转换成转义字符,如"%HH",然后组合成这种形式key1=value1&key2=value2
;所以后端在取数据后,要进行解码。
注意:
若表单中有文件,则只留文件名;
multipart/form-data
该类型用于高效传输文件、非ASCII数据和二进制数据,将表单数据逐项地分成不同的部分,用指定的分割符分割每一部分。每一部分都拥有Content-Disposition
头部,指定了该表单项的键名和一些其他信息;并且每一部分都有可选的Content-Type
,不特殊指定就为text/plain
。下面给出一个采用multipart/form-data
编码类型的例子:
Content-Type: multipart/form-data; boundary=AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...
--AaB03x--
注意:
一般来说,
method
和enctype
是两个不同的互不影响的属性,但在传文件时,method
必须要指定为POST
,否则文件只剩下filename了;当没有传文件时,
enctype
会改回默认的application/x-www-form-urlencoded
。
text/plain
按照键值对排列表单数据key1=value1\r\nkey2=value2
,不进行转义。
注意:
若表单中有文件,则只留文件名;
application/json及其他MIME类型
另外,还需要说明表单数据编码类型application/json
,已经被W3C遗弃(详见HTML JSON Form Submission),建议不要在<form enctype="...">
中使用了,即使用了如果浏览器不支持,也会替换成application/x-www-form-urlencoded
。
同理,其余的MIME类型,也不支持,均会替换成默认编码application/x-www-form-urlencoded
。
PS:貌似现在浏览器都不支持了,我先用了下面几个浏览器:
FF43:Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0
Chrome49, Safari9.1:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36
IE6, 8
后记
所以,enctype
可以认为就是表单数据的content type(MIME type)
,只不过其取值不能用除了上面提到的三个,否则会转换成默认的编码。
今天掰扯完了表单提交时的编码类型enctype
,以及它和content type
、MIME type
的关系。下次再总结一下Ajax提交表单的类型吧。
表单提交时编码类型enctype详解的更多相关文章
- JS之表单提交时编码类型enctype详解
简介 form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x- ...
- 10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型
通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...
- 如何实现织梦dedecms表单提交时发送邮箱功能【已解决】
我们通过织梦系统制作网站时,很多客户需要有在线留言功能,这时就会用到自定义表单.但是很多用户觉得经常登陆后台查看留言信息太麻烦了,于是想能否在提交留言是直接把内容发送到指定邮箱.网站经过测试终于实现了 ...
- form表单提交时选择性传值到后台
正常情况下form表单提交会把表单内的内容提交到后台,但是如果有些内容只是作为展示或者是标记而不想传到后台,我们采用如下方法: jsp页面如下,我们不想提交id为userIdMark和pwdMark的 ...
- jQuery判断 form表单提交时一些文本框的判断
一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...
- php form表单提交时,action url中参数无效的解决方法
表单提交时get方式的一个错误 <form class="form-inline pull-right" method="get" action=&quo ...
- webform非表单提交时防xss攻击
1.webform默认配置下,主动防御了针对表单提交的xss攻击,但这次发生时因为url导致的,所以webform的默认防御机制不起作用 webform下输出非表单提交获得的数据的时候,要加htm ...
- 使用 HttpClient 进行表单提交时,遇到的问题
问题 在开发微信支付的小微商户进件接口时,需要通过表单来上传身份证图片等数据.在微信支付接口文档也说明了,需要使用 multipart/form-data 的方式发送请求..NET 提供了 Multi ...
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
随机推荐
- The way to Go(1): Introduction
Reference: Github: Go Github: The way to Go Introduction to Go 设计要求: 能够以更快的速度开发软件 开发出的软件能够很好地在现代的多核计 ...
- UVa 11636 你好 世界!(贪心)
https://vjudge.net/problem/UVA-11636 题意: 经过一次复制,一条语句会变成两条语句,再经过一次变成四条语句...求最少需要复制几次能使条数恰好为n? 思路: 贪心水 ...
- 对当前JAVA流行框架的一些小感悟
这几年,蹦出了不少各种JAVA框架,像是spring boot.spring cloud 和spring mvc或者是mybatis等等. 不断有人感慨,技术更新的太快,自己学都学不过来了. 但是,这 ...
- C#中的?
1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=null; 编译器就会报错.为了使值类型也 ...
- English trip -- VC(情景课) 6 B Events 事件
xu言: ... 自己选择的路,就算是爬,也要给我爬完.短短人生数载,我能之止于此? Words appointment 预约 meeting 会议 class movie party prog ...
- Andorid 之日历控件,可左右滑动,包含公历,农历,节假日等
公司项目需要日历这个功能,经过查阅资料写了个demo,包含公历,农历,节假日等,还可左右滑动. 效果图: 代码: public class MainActivity extends AppCompat ...
- android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
- spring PROPAGATION
PROPAGATION_REQUIRED Support a current transaction; create a new one if none exists. 支持一个当前事务;如果不存在 ...
- js 正则去除指定的单词
以企业邮箱为例:@后面不能是qq 126 163 188 gmail yahoo sina hotmail suhu sogu 等单词. <!DOCTYPE htm ...
- OAF 标准的供应商管理员批准流程
标准供应商审批流程 oracle.apps.pos.onboard.webui.FlexRegApproverPGCO--初始化poplist LinkedList actionListText = ...