form提交(图片,excel其他文件)
HTML表单需要设置enctype="multipart/form-data"
这个属性,如果不这么设置,在提交表单时候,相关文件将无法获取。
HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值:
(1)application/x-www-form-urlencoded
在发送前编码所有字符(默认)(空格被编码为’+’,特殊字符被编码为ASCII十六进制字符)
(2)multipart/form-data
不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
(3)text/plain
空格转换为 “+” 加号,但不对特殊字符编码。
默认enctype=application/x-www-form-urlencoded
,所以表单的内容会按URL规则编码,然后根据表单的提交方法:
(1)method=’get’ 编码后的表单内容附加在请求连接后
(2)method=’post’ 编码后的表单内容作为post请求的正文内容
获取各种请求数据结果:
(1)条件:method='get' enctype=application/x-www-form-urlencoded
<form action="xxx" method="get">
<input type="text" name="name">
<input type="file" name="file"/>
<input type="submit" value="submit" name="submit">
</form>
在输入框中输入"hello word" 并进行提交
1 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中
(2)条件:method='post' enctype=application/x-www-form-urlencoded
<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"
,选择文件,点击提交 1 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'
提交的文件内容并没有被提交,只是把文件名编码到了正文中
(3)条件:method='get' enctype='multipart/form-data'
<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"
,选择文件,点击提交 1 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配合无效
(4)method='post' enctype=multipart/form-data
<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"
,选择文件,点击提交 1 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请求中
参考:https://www.w3school.com.cn/tags/att_form_enctype.asp
form提交(图片,excel其他文件)的更多相关文章
- form表单系列中文件上传及预览
文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...
- 导出带图片的Excel——OOXML文件分析
需求: 普通js导出文件excel具有兼容性问题,通过js-xsl导出文件API未找到导出图片的方案,实例过少,因此针对07年后以.xlsx后缀的excel文件,通过修改后缀.zip参考文件模板来实现 ...
- Freemaker生成复杂样式图片并无文件损坏的excel
Freemaker生成复杂样式图片并无文件损坏的excel 参考Freemarker整合poi导出带有图片的Excel教程,优化代码实现 功能介绍:1.支持Freemarker导出Excel的所有功能 ...
- Ajax提交form表单内容和文件(jQuery.form.js)
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
- jquery.validate+jquery.form提交的三种方式
原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...
- easyui form提交和formdata提交记录
1 easyui form提交 $('form').form('submit',{ url:''; onSubmit:''; success:function(data){ //这种方法获取到的da ...
- form提交表单没接收到$_POST
分享一个最近做项目遇到的奇葩经历: 很奇怪的,我在弄一个表单提交的时候,后台验证就报了非post提交错误 我就郁闷了,我form明明写的method为post,不可能是非post错误啊 经历反应测试, ...
- 使用HttpURLConnection请求multipart/form-data类型的form提交
写一个小程序,模拟Http POST请求来从网站中获取数据.使用Jsoup(http://jsoup.org/)来解析HTML. Jsoup封装了HttpConnection的功能,可以向服务器提交请 ...
- 使用form表单上传文件
在使用form表单上传文件时候,input[type='file']是必然会用的,其中有一些小坑需要避免. 1.form的 enctype="multipart/form-data" ...
随机推荐
- [SketchUp]-绘制自己的家
[SketchUp]-绘制自己的家 softsketchuphome 简介 最近已经完成了 毕业论文, 等待盲审的过程中, 将过去几年做的东西也都一一整理了, 硬盘中好几个不敢动的文件夹 也都可以删除 ...
- JDK11的重要新特性
文章目录 JDK11发布啦 Oracle不再提供JRE和Server JRE下载 删除部署工具 JavaFX不再包含在JDK中 删除Java EE和CORBA模块 JDK11发布啦 JDK11 在20 ...
- poj_1323 Game Prediction 贪心
Game Prediction Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11814 Accepted: 5701 ...
- 记一次Pinpoint监控工具部署过程
环境:Centos 7.4 X64IP:192.168.1.11 1.配置环境,先安装jdk 到Oracle官网下载安装JDK https://www.oracle.com/technetwork/j ...
- KafkaConsumer assign VS subscribe
背景 在kafka中,正常情况下,同一个group.id下的不同消费者不会消费同样的partition,也即某个partition在任何时刻都只能被具有相同group.id的consumer中的一个消 ...
- OSChina 周一乱弹 —— 为什么人类和人工智能定要一战
2019独角兽企业重金招聘Python工程师标准>>> Osc乱弹歌单(2018)请戳(这里) [今日歌曲] @小小编辑:推荐歌曲,又失恋了 - 花粥 <又失恋了>- 花 ...
- CentOS 6.5下通过yum安装MongoDB记录
安装MongoDB 1.创建repo vi /etc/yum.repos.d/mongodb-org-3.6.repo [mongodb-org-3.6] name=MongoDB Repos ...
- 图论--LCA--在线RMQ ST
板子测试POJ1330,一发入魂,作者是KuangBin神犇,感谢? #include <cstdio> #include <cstring> #include <al ...
- Linux下创建软、硬链接
在linux系统中,内核为每一个新创建的文件分配一个Inode(索引节点),每个文件都有唯一的inode号.文件属性保存在索引节点里,在访问文件时,索引节点被复制到内存,从而实现文件的快速访问. 链接 ...
- ubuntu 15.04 的安装遇到的问题及其解决方法
在Ubuntu15.04 的安装(U盘)中 遇到的问题1:安装后设置电脑从U盘启动,启动失败,屏幕上显示:Failed to load ldlinux.c32 解决方法:当时是参考这篇文章 http: ...