100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 为什么上传文件的表单需要设置enctype=multipart/form-data

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

时间:2019-05-27 08:44:39

相关推荐

为什么上传文件的表单需要设置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.1Host: hello.appConnection: keep-aliveAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Upgrade-Insecure-Requests: 1User-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.36Referer: http://hello.app/formtest.htmlAccept-Encoding: gzip, deflate, sdchAccept-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代码为:

<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.1Host: hello.appConnection: keep-aliveContent-Length: 50Cache-Control: max-age=0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Origin: http://hello.appUpgrade-Insecure-Requests: 1User-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.36Content-Type: application/x-www-form-urlencodedReferer: http://hello.app/formtest.htmlAccept-Encoding: gzip, deflateAccept-Language: zh-CN,zh;q=0.8,en;q=0.6name=%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代码为:

<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.1Host: hello.appConnection: keep-aliveAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Upgrade-Insecure-Requests: 1User-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.36Referer: http://hello.app/formtest.htmlAccept-Encoding: gzip, deflate, sdchAccept-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.1Host: hello.appConnection: keep-aliveContent-Length: 3695Cache-Control: max-age=0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Origin: http://hello.appUpgrade-Insecure-Requests: 1User-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.36Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIZDrYHwuf2VJdpHwReferer: http://hello.app/formtest.htmlAccept-Encoding: gzip, deflateAccept-Language: zh-CN,zh;q=0.8,en;q=0.6------WebKitFormBoundaryIZDrYHwuf2VJdpHwContent-Disposition: form-data; name="name""hello world"------WebKitFormBoundaryIZDrYHwuf2VJdpHwContent-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`.------WebKitFormBoundaryIZDrYHwuf2VJdpHwContent-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请求中。

参考文章

Forms in HTML documentsHTML 标签的 enctype 属性

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。