文件上传为什么要用 enctype=multipart/form-data ???
在文件上传的过程中发现,HTML表单需要设置enctype="multipart/form-data"这个属性,虽然不这么设置的确无法上传,但这是为什么呢?
HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值:
application/x-www-form-urlencoded在发送前编码所有字符(默认)(空格被编码为’+’,特殊字符被编码为ASCII十六进制字符)
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
text/plain 空格转换为 “+” 加号,但不对特殊字符编码。
默认enctype=application/x-www-form-urlencoded,所以表单的内容会按URL规则编码,然后根据表单的提交方法:
method=’get’ 编码后的表单内容附加在请求连接后
method=’post’ 编码后的表单内容作为post请求的正文内容
我们通过抓包软件来分析一下这几种方式产生的请求的差别
实验一
条件
method=‘get’
enctype=application/x-www-form-urlencoded
对应的html代码为:
文本框中输入"hello world",选择文件,点击提交,浏览器发出的HTML包为:
GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1
Host: hello.app
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Referer: http://hello.app/formtest.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
因为是get请求,所以只有头部没有正文。请求的链接为/xxx?name=hello+world.&file=temp.png&submit=submit,可以看到表单的信息已经被编码到URL中了。
注意两点:
"hello world"被编码为%22hello+world%22,特殊字符和空格都被编码
type='file’提交的文件内容并没有被提交,只是把文件名编码到了URL中
实验二
条件
method=‘post’
enctype=application/x-www-form-urlencoded
对应的html代码为:
文本框中输入"hello world",选择文件,点击提交,浏览器发出的HTML包为:
POST /xxx HTTP/1.1
Host: hello.app
Connection: keep-alive
Content-Length: 50
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
Origin: http://hello.app
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://hello.app/formtest.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
name=%22hello+world%22&file=temp.png&submit=submit
与get请求相比,只是把name=hello+world.&file=temp.png&submit=submit放在了正文中,其他没有区别了
注意两点:
"hello world"被编码为%22hello+world%22,特殊字符和空格都被编码
type='file’提交的文件内容并没有被提交,只是把文件名编码到了正文中
实验三
条件
method=‘get’
enctype=‘multipart/form-data’
对应的html代码为:
文本框中输入"hello world",选择文件,点击提交,浏览器发出的HTML包为:
GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1
Host: hello.app
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Referer: http://hello.app/formtest.html
Accept-Encoding: gzip, deflate, sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
结果和实验一一模一样,说明get和multipart/form-data配合无效。
实验四
条件
method=‘post’
enctype=multipart/form-data
对应的html代码为:
文本框中输入"hello world",选择文件,点击提交,浏览器发出的HTML包为:
POST /xxx HTTP/1.1
Host: hello.app
Connection: keep-alive
Content-Length: 3695
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
Origin: http://hello.app
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIZDrYHwuf2VJdpHw
Referer: http://hello.app/formtest.html
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
------WebKitFormBoundaryIZDrYHwuf2VJdpHw
Content-Disposition: form-data; name=“name”
“hello world”
------WebKitFormBoundaryIZDrYHwuf2VJdpHw
Content-Disposition: form-data; name=“file”; filename=“temp.png”
Content-Type: image/png
.PNG
.
…
IHDR…
…Y…/…,+|.aIk.v...G?...P.P,,...m..e.2....v.7.pHYs...aIk.v...G?...P.P,,...m..e.2....v.7. pHYs...%...%.IRaIk.v...G?...P.P,,...m..e.2....v.7.pHYs...…|IDAT(.cTT…:.?..}.(.PdA..V...L...?..#.....4.o..LS.....W.d.?...A8..LS...(.u.......D.b......b.....o&..;..<.1......IEND.B
.
------WebKitFormBoundaryIZDrYHwuf2VJdpHw
Content-Disposition: form-data; name=“submit”
submit
------WebKitFormBoundaryIZDrYHwuf2VJdpHw–
这次与前两次相比有很大的不同。请求主题的内容复杂很多。
根据boundary定义的字符串,正文被分割为几个部分,每个部分与表单中的内容一一对应。
每部分内容,还会由Content-Disposition: form-data; name="name"这样的字符串指定内容,与名字。
对于文件内容,还有有额外的两个字段filename=“temp.png”‘和Content-Type: image/png,并且文件的内容就直接附加在后面。
总结
所以,只有使用enctype=“multipart/form-data”,表单才会把文件的内容编码到HTML请求中。
文件上传为什么要用 enctype=multipart/form-data ???相关推荐
- 【愚公系列】2023年04月 文件上传渗透测试之绕过黑名单检查(::$DATA、点+空格+点)
文章目录 前言 一.::$DATA绕过 二.点+空格+点 前言 文件上传漏洞是一种安全漏洞,指攻击者通过网站上传功能上传恶意文件来攻击网站的漏洞.攻击者可以通过利用这种漏洞上传恶意文件来执行代码和命令 ...
- ssm上传文件获取路径_SSM文件上传
**自己对于SSM文件上传的一些心得** 刚开始的时候也是在网上寻找一些简单的案例,可能我的这篇文章不是最好的,但是这些都是我自己慢慢的摸索以及自己的尝试的一些心得,希望对各位有所帮助. 其实文件的上 ...
- Javaweb学习笔记——(二十二)——————文件上传、下载、Javamail
文件上传概述 1.文件上传的作用 例如网络硬盘,就是用来上传下载文件的. 在网络浏览器中,时常需要上传照片 2.文件上传对页面的要求 上 ...
- java 文件上传 servlet_java文件上传-原始的Servlet方式
前言: 干了这几个项目,也做过几次文件上传下载,要么是copy项目以前的代码,要么是百度的,虽然做出来了,但学习一下原理弄透彻还是很有必要的.刚出去转了一圈看周围有没有租房的,在北京出去找房子是心里感 ...
- JSP基础:(7)jsp分页与文件上传下载
目录 1 jsp分页 1.1 定义 1.2 Servlet控制器方法 2 文件上传下载 2.1 定义 2.2 SmartUpload 2.2.1 介绍 2.2.2 SmartUpload组件-Requ ...
- Java Web 文件上传下载
文章目录 1文件上传概述 1.1文件上传的作用 1.2文件上传对页面的要求 1.3 比对文件上传表单和普通文本表单的区别 1.4 对普通文本表单的测试 1.5 文件上传对Servlet的要求 2 co ...
- 超全面的JavaWeb笔记day22文件上传
文件上传概述 1 文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2 文件上传对页面的要求 上传文件的要求比较多,需要记一下: 1. 必须使用 ...
- javaweb文件上传下载
文件上传概述 1 文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2 文件上传对页面的要求 上传文件的要求比较多,需要记一下: 必须使用表单, ...
- Servlet文件上传
1 文件上传的作用 例如网络硬盘!就是用来上传下载文件的. 在智联招聘上填写一个完整的简历还需要上传照片呢. 2 文件上传对页面的要求 上传文件的要求比较多,需要记一下: 必须使用表单,而不能是超链接 ...
最新文章
- 复习宝典之Maven项目管理
- Java单向链表操作详解
- Tomcat源码学习(7)-How Tomcat works(转)
- linux下pcre编译,linux下交叉编译lighttpd以及pcre
- 如何在 C# 中使用 投影(Projection)
- 在浏览器控制台执行以下代码,输入的结果是()
- leetcode 93. 复原IP地址 思考分析
- php中取整的函数,利用PHP怎么对函数进行取整
- 遍历lucene索引库的字段名
- Android应用程序插件化研究之DexClassLoader
- struts2生成随机验证码图片
- 使用ILSpy软件反编译.Net应用程序的方法及注意事项
- html是用来表示网上信息的符号标记语言,html标记的一般格式
- 使用ArcMap将txt数据转换成shp数据
- VRRP协议 学习笔记
- Openbravo如何新建一个调用
- 【python】耗时统计小程序
- ant design vue table 高度自适应_对比1万2千个Vue.js开源项目发现最实用的 TOP45!火速拿来用!...
- Windows系统文件类型大全
- 计算机管理员权限打不开怎么办,administrator管理员权限怎么打开?