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. Javascript中的string类型使用UTF-16编码

    2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,所有的string类型(或者被称为DOMString)都是使用UTF-16编码的. MDN DOMS ...

  2. 瑞银预计小扎的十年规划可获大回报 上调Facebook股票目标价

    瑞银认为马克·扎克伯格(Mark Zuckerberg)为Facebook定制的十年规划将带来丰厚回报,它已将Facebook股票的目标价由之前的155美元上调至165美元. Facebook首席执行 ...

  3. 编写C#程序的IDE

    编写C#程序,在Windows平台下,除了昂贵的Visual Studio.NET这个正宗的工具外,你还了解哪些? 听说有个Eclipse,IBM投钱开发的开源工具,有人也做了个for .NET的pl ...

  4. A Tile Painting(循环节)

    Ujan has been lazy lately, but now has decided to bring his yard to good shape. First, he decided to ...

  5. POJ 1330 Nearest Common Ancestors(裸LCA)

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39596   Accept ...

  6. 白话typescript中的【extends】和【infer】(含vue3的UnwrapRef)

    大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. extends types ...

  7. Flutter 首页必用组件NestedScrollView

    老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能.修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接 ...

  8. 步入LTE、多址技术

    LTE系统的主要性能和目标 与3G相比,LTE主要性能特性: 带宽灵活配置:支持1.4MHz, 3MHz, 5MHz, 10Mhz, 15Mhz, 20MHz 峰值速率(20MHz带宽):下行100M ...

  9. leetcode_二叉树验证(BFS、哈希集合)

    题目描述: 二叉树上有 n 个节点,按从 0 到 n - 1 编号,其中节点 i 的两个子节点分别是 leftChild[i] 和 rightChild[i]. 只有 所有 节点能够形成且 只 形成 ...

  10. 【FreeRTOS学习03】小白都能懂的Task Management 任务管理基本概念介绍

    在FreeRTOS中,线程的术语又可以被称之为任务,或许这样更加合适,本文将介绍任务的创建/删除,任务参数的使用,以及任务优先级: 1 软实时和硬实时 硬实时系统的任务运行正确性与响应时限是紧密相关的 ...