zoukankan      html  css  js  c++  java
  • 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 

    1 <form action="xxx" method="get">
    2 <input type="text" name="name">
    3 <input type="file" name="file"/>
    4 <input type="submit" value="submit" name="submit">
    5 </form>
    在输入框中输入"hello word" 并进行提交
    1
    GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1 2 Host: hello.app 3 Connection: keep-alive 4 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 5 Upgrade-Insecure-Requests: 1 6 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 7 Referer: http://hello.app/formtest.html 8 Accept-Encoding: gzip, deflate, sdch 9 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

    1 <form action="xxx" method="
    2 post">
    3 <input type="text" name="name">
    4 <input type="file" name="file"/>
    5 <input type="submit" value="submit" name="submit">
    6 </form>
     文本框中输入"hello world",选择文件,点击提交

    1
    POST /xxx HTTP/1.1 2 Host: hello.app 3 Connection: keep-alive 4 Content-Length: 50 5 Cache-Control: max-age=0 6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 7 Origin: http://hello.app 8 Upgrade-Insecure-Requests: 1 9 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 10 Content-Type: application/x-www-form-urlencoded 11 Referer: http://hello.app/formtest.html 12 Accept-Encoding: gzip, deflate 13 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6 14 15 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'   

    1 <form action="xxx" method="
    2 get" enctype="multipart/form-data">
    3 <input type="text" name="name">
    4 <input type="file" name="file"/>
    5 <input type="submit" value="submit" name="submit">
    6 </form>
    文本框中输入"hello world",选择文件,点击提交

    1
    GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1 2 Host: hello.app 3 Connection: keep-alive 4 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 5 Upgrade-Insecure-Requests: 1 6 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 7 Referer: http://hello.app/formtest.html 8 Accept-Encoding: gzip, deflate, sdch 9 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

      结果和实验一一模一样,说明get和multipart/form-data配合无效

        (4)method='post'   enctype=multipart/form-data

    1 <form action="xxx" method="
    2 post" enctype="multipart/form-data">
    3 <input type="text" name="name">
    4 <input type="file" name="file"/>
    5 <input type="submit" value="submit" name="submit">
    6 </form>
    文本框中输入"hello world",选择文件,点击提交

    1
    POST /xxx HTTP/1.1 2 Host: hello.app 3 Connection: keep-alive 4 Content-Length: 3695 5 Cache-Control: max-age=0 6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 7 Origin: http://hello.app 8 Upgrade-Insecure-Requests: 1 9 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 10 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIZDrYHwuf2VJdpHw 11 Referer: http://hello.app/formtest.html 12 Accept-Encoding: gzip, deflate 13 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6 14 15 ------WebKitFormBoundaryIZDrYHwuf2VJdpHw 16 Content-Disposition: form-data; name="name" 17 18 "hello world" 19 ------WebKitFormBoundaryIZDrYHwuf2VJdpHw 20 Content-Disposition: form-data; name="file"; filename="temp.png" 21 Content-Type: image/png 22 23 .PNG 24 . 25 ... 26 IHDR... 27 ..........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`. 28 ------WebKitFormBoundaryIZDrYHwuf2VJdpHw 29 Content-Disposition: form-data; name="submit" 30 31 submit 32 ------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

     

    kafka rabbitMq
  • 相关阅读:
    深入理解计算机系统(3.7)------过程(函数的调用原理)
    深入理解计算机系统(3.6)------汇编的流程控制
    深入理解计算机系统(3.5)------特殊的算术操作指令
    深入理解计算机系统(3.4)------算术和逻辑操作
    深入理解计算机系统(3.3)------操作数指示符和数据传送指令
    深入理解计算机系统(3.2)------程序编码以及数据格式
    redis调优 -- 内存碎片
    windows及linux环境下永久修改pip镜像源的方法
    Nginx限制某个IP同一时间段的访问次数和请求数示例代码
    Pycharm安装详细教程
  • 原文地址:https://www.cnblogs.com/stt101517/p/12935301.html
Copyright © 2011-2022 走看看