为什么上传文件的表单需要设置enctype="multipart/form-data"

原创 2015年11月05日 20:23:52

在学习PHP文件上传的过程中发现,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代码为:

<form action="xxx" method="get">
<input type="text" name="name">
<input type="file" name="file"/>
<input type="submit" value="submit" name="submit">
</form>

文本框中输入"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中了。

注意两点:

  1. "hello world"被编码为%22hello+world%22,特殊字符和空格都被编码
  2. type='file'提交的文件内容并没有被提交,只是把文件名编码到了URL中

实验二

条件

  • method='post'
  • enctype=application/x-www-form-urlencoded

对应的html代码为:

<form action="xxx" method="
post">
<input type="text" name="name">
<input type="file" name="file"/>
<input type="submit" value="submit" name="submit">
</form>

文本框中输入"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放在了正文中,其他没有区别了

注意两点:

  1. "hello world"被编码为%22hello+world%22,特殊字符和空格都被编码
  2. type='file'提交的文件内容并没有被提交,只是把文件名编码到了正文中

实验三

条件

  • method='get'
  • enctype='multipart/form-data'

对应的html代码为:

<form action="xxx" method="
get" enctype="multipart/form-data">
<input type="text" name="name">
<input type="file" name="file"/>
<input type="submit" value="submit" name="submit">
</form>

文本框中输入"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代码为:

<form action="xxx" method="
post" enctype="multipart/form-data">
<input type="text" name="name">
<input type="file" name="file"/>
<input type="submit" value="submit" name="submit">
</form>

文本框中输入"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...%...%.IR$....|IDAT(.cTT....................:.?.......}.(.Pd`A..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"设置与不设置的区别

本片文章将揭秘,在form表单中,enctype="multipart/form-data"设置与不设置时,服务器接收数据的不同情况! 情景1 页面:   服务端(核心部分): //requ...
  • rock_lv
  • rock_lv
  • 2016年09月20日 15:49
  • 2600

Multipart/form-data POST文件上传详解

Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下:   ...
  • xiaojianpitt
  • xiaojianpitt
  • 2011年10月09日 17:45
  • 291741

表单中存在上传文件时设置enctype="multipart/form-data"的问题

(1)在用Struts上传文件时,遇到了javax.servlet.ServletException: BeanUtils.populate异常。 我的ActionServlet并没有用到BeanU...
  • yongshuai185
  • yongshuai185
  • 2017年01月11日 10:03
  • 1165

为什么上传文件的表单里面要加一个属性ENCTYPE=MULTIPART/FORM-DATA?

首先知道enctype这个属性管理的是表单的MIME编码。共有三个值可选: 1、application/x-www-form-urlencoded 2、multipart/form-data 3、t...
  • xuanjiewu
  • xuanjiewu
  • 2015年08月27日 16:44
  • 961

enctype=“multipart/form-data”,Servlet获取参数

HTML表单enctype属性是设置表单传输的MIME编码,共有三个值可选:   ①application/x-www-form-urlencoded (默认值,不能用于文件上传)   ②mu...
  • lzxomg
  • lzxomg
  • 2017年03月21日 18:46
  • 3188

jsp表单中上传文件 enctype="multipart/form-data"解释

ENCTYPE="multipart/form-data"用于表单里有图片上传。    表单标签中设置enctype="multipart/form-data"来确保匿名上载文件的正确编码。 ...
  • zlj1217
  • zlj1217
  • 2017年01月30日 01:17
  • 2924

为什么上传文件的表单里面要加一个属性enctype=multipart/form-data?

首先知道enctype这个属性管理的是表单的MIME编码。共有三个值可选: 1、application/x-www-form-urlencoded 2、multipart/form-data 3、te...
  • qq_31780525
  • qq_31780525
  • 2016年09月24日 14:13
  • 940

springmvc文件上传form表单加上enctype="multipart/form-data"后无法实现Bean的注入解决方案

在一个带enctype="multipart/form-data"属性的表单提交时发现,该表单中包含的其他input无法设置到对应方法参数中。 如下: JSP:带enctype="multipar...
  • baidu_33403616
  • baidu_33403616
  • 2017年04月20日 14:30
  • 2092

ENCTYPE=multipart-form-data

ENCTYPE="multipart/form-data",这句话的意思是把你表单的所有信息以流方式提交,页面上的所有信息已经都转换为了文件流,为的是能让服务端得到你上传的文件的文件流。当然,你填写的...
  • lihushiwoa
  • lihushiwoa
  • 2013年12月14日 22:35
  • 446

form表单中的enctype="multipart/form-data

表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文...
  • qq_34102108
  • qq_34102108
  • 2016年04月04日 15:54
  • 194
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:为什么上传文件的表单需要设置enctype="multipart/form-data"
举报原因:
原因补充:

(最多只允许输入30个字)