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

最新推荐文章于 2025-09-25 11:44:10 发布
原创 最新推荐文章于 2025-09-25 11:44:10 发布 · 4.3w 阅读 · 62 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#php

本文深入探讨HTML表单上传文件时enctype属性的作用，通过实验对比get与post请求下使用不同enctype值的效果，揭示正确设置enctype='multipart/form-data'对于文件上传的重要性。

在学习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"之后传值问题
LitRad
06-30 6814
今天做一个简单的商城项目的时候碰到了一个问题,将前台页面传过来的参数直接想当然的使用BeanUtils的populate封装进了bean,去数据库看发现只有自己给bean设置的值,前台传的一个都没有存储进去.查了资料发现,使用了multipart/form-data之后,表单数据都是二进制传输的,request不能识别到,那么只能使用fileitem的isFormFiled方法判断是表单中的数据之...
【HTML】表格、表单
耐清
04-05 673
表格 表单
上传文件fileupload+解决enctype= multipart/form-data无法传递其他参数
09-24
解决上传文件enctype= multipart/form-data 时无法传递其他参数的问题，以及项目全局编码问题。用的插件是commons io + commons fileupload
HTTP multipart/form-data
ting_zh的博客
09-25 399
是一种 HTTP Content-Type 类型，用于在一次请求中发送多个部分（parts）的数据，每个部分可以是普通字段，也可以是文件数据。与常见的相比，它能够处理大文件上传，因为不会将整个表单内容编码成 URL 查询字符串。
multipart form-data boundary 说明
weixin_30547797的博客
09-12 1439
含义 ENCTYPE="multipart/form-data" 说明： 通过 http 协议上传文件 rfc1867协议概述，jsp 应用举例，客户端发送内容构造1、概述在最初的 http 协议中，没有上传文件方面的功能。 rfc1867 (http://www.ietf.org/rfc/rfc1867.txt) 为 http 协议添加了这个功能。客户端的浏览器，如 Microsoft IE,...
为什么上传文件的表单里面要加一个属性ENCTYPE=MULTIPART/FORM-DATA？
weixin_30384217的博客
01-04 629
首先知道enctype这个属性管理的是表单的MIME编码。共有三个值可选：1、application/x-www-form-urlencoded2、multipart/form-data3、text/plain其中application/x-www-form-urlencoded是默认值，作用是设置表单传输的编码。例如我们在AJAX中见过xmlHttp.setRequestHeader("Cont...
enctype=“multipart/form-data”
yywCode的博客
08-27 1079
enctype这个属性管理的是表单的MIME（Multipurpose Internet Mail Extensions）编码,共有三个值可选： 1、application/x-www-form-urlencoded —默认值,作用是设置表单传输的编码,不能用于上传文件 eg: AJAX中xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form- urlencoded”),不写会报错的form表单里是可以不写enctype=app
js动态在form上插入enctype=multipart/form-data的问题
01-21
我们都知道要让form能提交文件，需要在form上指定enctype=multipart/form-data的attribute，这样才能上传文件，关于enctype的文章很多，就不再做解释。 问题是因为使用了MVC的Html.BeginForm()来输出表单代码，默认...
文件上传（enctype=multipart/form-data ；type="file" ；method="post"）和下载
qq_42243225的博客
10-23 1421
常见的表单标签： 通常使用标签向服务器端提交数据 标签常用类型有9种类型 text：文本域 password：密码文本域 radio：单选按钮 checkbox：多选按钮 file：文件上传 hidden：隐藏域 reset：重置按钮 submit：提交按钮 button：按钮 观察实验中示例，通常表单域的值都是value值，在服务器端使用 request.getParameter(“na...
form表单enctype="multipart/form-data"
星星之火
07-06 1502
form表单设置enctype="multipart/form-data"之后，上传文件，获取文件名、路径等都没有问题。 如果需要获取form中普通控件，比如type=“text”的值，使用request.getparameter（“xxx”）是无法成功的。 因为enctype将信息以二进制输入。 如何解决这个问题，网上很多，基本就一个意思， SmartUpload su = new Sm
表单形式上传文件时为何必须设置enctype属性
Cupido
02-01 490
数字编码技术是一门较为复杂的科学，也是现代化电子信息交互技术的重要基础之一，在双向通信和传输的过程中扮演着密码本的角色，计算机间的双向数据传输都是靠0101的BIN格式电信号在互联网之间传输的。那么，收到的数据就要转换和翻译成为人类易于读取的文字，2-16进制转换，16-10进制转换，10进制数再向规定的字符集中的字符转换，这样一进一出就制定出了最早的一些编码文件，如ASCII一类的译码范本。用 enctype 属性指定将数据回发到服务器时浏览器使用的编码类型，enctype是EncodeType的简写。
enctype="multipart/form-data"
pei_zhengxi
04-20 190
在form中设置enctype="multipart/form-data"，主要是为了上传文件。enctype默认的值为"application/x-www-form-urlencoded";   enctype="multipart/form-data"的意思是把你表单的所有信息以流方式提交，页面上的所有信息已经都转换为了文件流，为的是能让服务端得到你上传的文件的文件流。   设置了这...
form表单中的enctype=“multipart/form-data“什么意思?
热门推荐
铁马冰河入梦来
10-12 5万+
enctype就是encodetype就是编码类型的意思。 multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据的意思。 需要注意的是：默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。 applicati...
表单的enctype="multipart/form-data"
weixin_34321977的博客
11-16 260
在通过表单上传文件的时候，需要输入enctype="multipart/form-data" 最早的HTTP POST是不支持文件上传的，给编程开发带来很多问题。但是在1995年，ietf出台了rfc1867,也就是《RFC 1867 -Form-based File Upload in HTML》，用以支持文件上传。所以Content-Type的类型扩充了multipart/form-data...
form enctype:"multipart/form-data",method:"post" 提交表单，后台获取不到数据
weixin_34237596的博客
12-26 1038
在解决博问node.js接受参数的时候，发现当form中添加enctype:"multipart/form-data"，后台确实获取不到数据，于是跑到百度上查了一下，终于明白为什么了，下面转载一下原因吧： 1.get方式 get方式提交的话，表单项都保存在http header中，格式是 http://localhost:8080/hello.do?name1=value1&amp;name2=...
form表单中的enctype="multipart/form-data"
半亩方塘
09-30 729
表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据 
ENCTYPE="multipart/form-data"，
wangqiaowqo的专栏
05-18 163
ENCTYPE="multipart/form-data"，这句话的意思是把你表单的所有信息以流方式提交，页面上的所有信息已经都转换为了文件流，为的是能让服务端得到你上传的文件的文件流。当然，你填写的一些文本信息也变成了流，用request.getParameter()方法当然得不到值了 用request.getInputStream()来接收流数据吧...
enctype="multipart/form-data"是什么意思
最新发布
10-23
<think>我们正在讨论HTML表单中的enctype属性，特别是"multipart/form-data"的含义。根据提供的引用，我们可以总结如下： 1. enctype属性定义了表单数据在发送到服务器之前的编码方式。 2. 默认的编码方式是"application/x-www-form-urlencoded"，这种编码方式会将表单数据编码为键值对（类似URL查询字符串），但不能用于文件上传。 3. 当需要上传文件时，必须使用"multipart/form-data"编码方式。 具体来说： - "multipart/form-data"将表单数据分割成多个部分（每个表单字段一个部分），每个部分都可以有自己的MIME类型。 - 这种方式允许混合文本数据和二进制文件数据（如图片、音频、文件等）一起发送。 - 它是通过RFC 1867引入的，用于支持HTML表单中的文件上传。 例如，一个包含文本字段和文件字段的表单： ```html <form action="/upload" method="post" enctype="multipart/form-data"> <input type="text" name="description"> <input type="file" name="myFile"> <button type="submit">提交</button> </form> ``` 在这个表单中，当用户提交时，表单数据（包括文件内容）会以多部分(multipart)的形式发送到服务器。 引用[1]、[2]、[3]、[4]、[5]都强调了"multipart/form-data"对于文件上传的必要性。 因此，总结含义：**enctype="multipart/form-data"用于设置表单的MIME编码类型，以便在提交表单时能够支持文件上传，它将表单数据分成多个部分，每个部分对应一个表单控件，并且可以包含二进制文件数据。** §§相关问题§§ 1. 除了文件上传，multipart/form-data还有哪些应用场景？ 2. 在服务器端如何处理multipart/form-data表单提交？ 3. 默认的application/x-www-form-urlencoded编码方式具体是如何编码数据的？ 4. multipart/form-data的数据格式具体是怎样的？ 5. 使用multipart/form-data时，表单的method必须是post吗？ </think>### HTML中`enctype="multipart/form-data"`的含义 `enctype="multipart/form-data"`是HTML表单的关键属性，主要用于**支持文件上传功能**。其核心作用和工作原理如下： #### 1. **根本用途：文件上传** - 默认表单编码（`application/x-www-form-urlencoded`）只能传输文本数据，而 **`multipart/form-data`允许传输二进制文件**（如图片、视频、文档等）[^1][^3][^5]。 - 例如上传头像的表单： ```html <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="avatar"> <input type="submit"> </form> ``` #### 2. **技术原理：数据分块传输** - 表单数据被拆分成多个独立部分（multipart），每部分包含： - `Content-Disposition`：标识字段类型（表单字段或文件） - `Content-Type`：指定数据的MIME类型（如`image/jpeg`） - 字段名称和值（或文件二进制数据）[^2][^4][^5] - 各部分用唯一边界符（boundary）分隔，例如： ``` --boundary123 Content-Disposition: form-data; name="text_field" Hello World! --boundary123 Content-Disposition: form-data; name="file"; filename="photo.jpg" Content-Type: image/jpeg [二进制文件数据] ``` #### 3. **必要操作限制** - 必须与`method="post"`配合使用（GET请求无法传输大文件）[^5]。 - 文件字段需使用`<input type="file">`[^3]。 #### 4. **历史背景** - 由RFC 1867标准引入（1995年），解决了早期HTTP协议不支持文件上传的问题[^4]。 > 简言之：**该属性是文件上传的必备设置，通过分割数据包实现二进制安全传输**。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值