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其他文件)的更多相关文章

  1. form表单系列中文件上传及预览

    文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...

  2. 导出带图片的Excel——OOXML文件分析

    需求: 普通js导出文件excel具有兼容性问题,通过js-xsl导出文件API未找到导出图片的方案,实例过少,因此针对07年后以.xlsx后缀的excel文件,通过修改后缀.zip参考文件模板来实现 ...

  3. Freemaker生成复杂样式图片并无文件损坏的excel

    Freemaker生成复杂样式图片并无文件损坏的excel 参考Freemarker整合poi导出带有图片的Excel教程,优化代码实现 功能介绍:1.支持Freemarker导出Excel的所有功能 ...

  4. 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 ...

  5. jquery.validate+jquery.form提交的三种方式

    原文:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html jquery.validate+jquery.form提交的三种 ...

  6. easyui form提交和formdata提交记录

    1  easyui form提交 $('form').form('submit',{ url:''; onSubmit:''; success:function(data){ //这种方法获取到的da ...

  7. form提交表单没接收到$_POST

    分享一个最近做项目遇到的奇葩经历: 很奇怪的,我在弄一个表单提交的时候,后台验证就报了非post提交错误 我就郁闷了,我form明明写的method为post,不可能是非post错误啊 经历反应测试, ...

  8. 使用HttpURLConnection请求multipart/form-data类型的form提交

    写一个小程序,模拟Http POST请求来从网站中获取数据.使用Jsoup(http://jsoup.org/)来解析HTML. Jsoup封装了HttpConnection的功能,可以向服务器提交请 ...

  9. 使用form表单上传文件

    在使用form表单上传文件时候,input[type='file']是必然会用的,其中有一些小坑需要避免. 1.form的 enctype="multipart/form-data" ...

随机推荐

  1. vue项目中使用bpmn-基础篇

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...

  2. asList和ArrayList不得不说的故事

    目录 简介 创建ArrayList UnsupportedOperationException asList 转换 总结 asList和ArrayList不得不说的故事 简介 提到集合类,ArrayL ...

  3. XmlSerializer .NET 序列化、反序列化

    序列化对象   要序列化对象,首先创建要序列化的对象并设置其公共属性和字段.为此,您必须确定要将XML流存储的传输格式,作为流或文件. 例如,如果XML流必须以永久形式保存,则创建一个FileStre ...

  4. INTERVIEW #3

    菊厂的面试本来没打算记录,因为当时投的是非技术岗(技术支持).为了全面,就寥做记录. 菊厂的面试因为有口头保密协议,所以不能透露具体题目. 0 群面 简历通过筛选后,会有短信通知去面试. 非技术岗第一 ...

  5. 用Eclipse开发项目,你不能不知道的快捷键

    1. 编辑快捷键 编辑快捷键 介绍 psvm + Tab 生成main方法 sout + tab 生成输出语句 Ctrl+X / Ctrl + Y 删除一行 Ctrl+D 复制一行 Ctrl+/ 或 ...

  6. 07 模型层 orm相关查询 F查询Q查询 django开启事务

    一.Django终端打印SQL语句 如果你想知道你对数据库进行操作时,Django内部到底是怎么执行它的sql语句时可以加下面的配置来查看 在Django项目的settings.py文件中,在最后复制 ...

  7. zabbix监控nginx日志状态码

    监控需求 监控Nginx常见的状态码并对其进行监控,对常见的错误状态码创建相对应的触发器以下按照分钟对数据进行抓取 Zabbix_Agentd创建监控脚本 1)创建脚本之前核对Nginx日志格式我这里 ...

  8. sequel pro无法连接mysql服务器

    1. 添加用户 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'your_passwd' WITH GRANT OPTION; FLU ...

  9. [LiDAR数据模拟]系列(2) HELIOS的TLS点云模拟流程

    关键词:地基激光雷达 点云模拟 XML文件 作者:李二 日期:07/05/2020 - 08/05/2020 我目前仅仅使用了TLS模式进行模拟,所以先讲一下TLS的模拟经验. ALS和MLS的模拟, ...

  10. 【STM32系列汇总】小白博主的STM32实战快速进阶之路(持续更新)

    我把之前在学习和工作中使用STM32进行嵌入式开发的经验和教程等相关整理到这里,方便查阅学习,如果能帮助到您,请帮忙点个赞: 本文的宗旨 STM32 只是一个硬件平台,同样地他可以换成MSP430,N ...