html · 2021-08-19 0

form的enctype编码解析

一、enctype

enctype可以取值：

  • application/x-www-form-urlencoded 默认编码，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）
  • multipart/form-data 不对字符编码，包含文件上传控件时，需要设置为该值。
  • text/plain
  • application/json
  • application/xml

对于google浏览器：

GET请求，无论enctype设置任何值，会强制的设置为application/x-www-form-urlencoded

POST请求，enctype是application/json和application/xml，会强制的设置为application/x-www-form-urlencoded

新的版本w3c废弃了enctype="application/json"特性。

二、代码

1.客户端

google浏览器

html代码

<form action="http://localhost:8888/hello" method="GET">
    username: <input name="username" type="text"><br/>
    age: <input name="age" type="text"><br/>
    <input name="myfile" type="file"><br/>
    <input type="submit"><br>
</form>

2.服务端

public class MyServer {

    public static void main(String[] args) {
        try {
            openServer(8888);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private static void openServer(int port) throws IOException {
        // 创建ServerSocket
        ServerSocket serverSocket = new ServerSocket();
        // 绑定端口
        serverSocket.bind(new InetSocketAddress(port));
        System.out.println("Server启动...");

        while (true){
            // 堵塞，等待客户端连接
            Socket socket = serverSocket.accept();
            BufferedReader br = null;
            BufferedWriter bw = null;

            try {
                System.out.println("port " + socket.getPort()  + " 连接成功...");

                br = new BufferedReader(new InputStreamReader(socket.getInputStream()));
                bw = new BufferedWriter(new OutputStreamWriter(socket.getOutputStream()));

                // 接受数据
                StringBuilder reqMsg = new StringBuilder();
                char[] buffer = new char[1024];
                while (true) {
                    int count = br.read(buffer);
                    reqMsg.append(buffer, 0, count);
                    if (count < 1024) {
                        break;
                    }
                }

                if (reqMsg.length() > 0) {
                    System.out.println(String.format("- - - 接受数据长度: %s - - -", reqMsg.length()));
                    System.out.println(reqMsg.toString());
                }

                // 返回数据
                bw.write("HTTP/1.1 200");

                System.out.println("port " + socket.getPort()  + " 连接结束...");
                System.out.println("- - - - - - - - - - - - - - - - - - - -");
            } catch (Exception e) {
                if (bw != null) {
                    bw.write("HTTP/1.1 404 ERROR:FILE NOT FINDED");
                }
            } finally {
                if (bw != null) {
                    bw.close();
                }
                if (br != null) {
                    br.close();
                }
                if (socket != null) {
                    socket.close();
                }
            }
        }

    }

}

三、发送请求

1.application/x-www-form-urlencoded

GET 请求结果：

port 56178 连接成功...
- - - 接受数据长度: 744 - - -
GET /hello?username=active+pirate&age=18&myfile=a.txt HTTP/1.1
Host: localhost:8888
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:63343/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-c43476a5=a28ffbe7-bdbe-4e32-a99b-dc3a9e8ec33c; Hm_lvt_e9e114d958ea263de46e080563e254c4=1621171338

port 56178 连接结束...
- - - - - - - - - - - - - - - - - - - -

POST 请求结果：

port 56644 连接成功...
- - - 接受数据长度: 871 - - -
POST /hello HTTP/1.1
Host: localhost:8888
Connection: keep-alive
Content-Length: 42
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: http://localhost:63343
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:63343/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-c43476a5=a28ffbe7-bdbe-4e32-a99b-dc3a9e8ec33c; Hm_lvt_e9e114d958ea263de46e080563e254c4=1621171338

username=active+pirate&age=18&myfile=a.txt
port 56644 连接结束...
- - - - - - - - - - - - - - - - - - - -

2. multipart/form-data

GET 请求结果：

同application/x-www-form-urlencoded

POST 上传txt文件

port 57418 连接成功...
- - - 接受数据长度: 1256 - - -
POST /hello HTTP/1.1
Host: localhost:8888
Connection: keep-alive
Content-Length: 391
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: http://localhost:63343
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryUGgVzCAllL496Zty
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:63343/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-c43476a5=a28ffbe7-bdbe-4e32-a99b-dc3a9e8ec33c; Hm_lvt_e9e114d958ea263de46e080563e254c4=1621171338

------WebKitFormBoundaryUGgVzCAllL496Zty
Content-Disposition: form-data; name="username"

active pirate
------WebKitFormBoundaryUGgVzCAllL496Zty
Content-Disposition: form-data; name="age"

18
------WebKitFormBoundaryUGgVzCAllL496Zty
Content-Disposition: form-data; name="myfile"; filename="a.txt"
Content-Type: text/plain

abcd
efgh

------WebKitFormBoundaryUGgVzCAllL496Zty--

port 57418 连接结束...
- - - - - - - - - - - - - - - - - - - -

POST 上传png图片

port 57926 连接成功...
- - - 接受数据长度: 2495 - - -
POST /hello HTTP/1.1
Host: localhost:8888
Connection: keep-alive
Content-Length: 1689
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: http://localhost:63343
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryiMGk1nwvZ3BQKaYC
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:63343/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-c43476a5=a28ffbe7-bdbe-4e32-a99b-dc3a9e8ec33c; Hm_lvt_e9e114d958ea263de46e080563e254c4=1621171338

------WebKitFormBoundaryiMGk1nwvZ3BQKaYC
Content-Disposition: form-data; name="username"

active pirate
------WebKitFormBoundaryiMGk1nwvZ3BQKaYC
Content-Disposition: form-data; name="age"

18
------WebKitFormBoundaryiMGk1nwvZ3BQKaYC
Content-Disposition: form-data; name="myfile"; filename="mypic.png"
Content-Type: image/png

�PNG

�4�����&&��ffl�I"w���y��[^�Q�ǹ_3��ט���YYY.��2?�81��{r��D��� ���ٷ9�7l��o��s��$�Jw}!y�>���������
�4k'���o+�V1�����@��@Pp� ���5l{5�`P���P�GÊ&����s�aHX�+�c؜D�K�$�����u��F�u��``��%���)F�7��D�p���8;�W
�N7��c��cǾ�   �_��z5�j���y��2����u� a���(
Z�)(��Z������;��H�%
 >Z�[9ݥ n�%!(8��S'�X��&�M#u�����G
���(��a�](L��nc
��vq��vv9M���+��j���Q��9�y��� C�H�;ɩ�a�Y>����<*
�y&��Ӊ�#�$��v�RW�_�n"�� byz3�� �GCm3^Շ��@U{U�B��*���҈�i� �H��l�z�Kյ4�8q߾�ǫ':f:���X�L+�ͺ����� �6���`g    IEND�B`�
------WebKitFormBoundaryiMGk1nwvZ3BQKaYC--

port 57926 连接结束...
- - - - - - - - - - - - - - - - - - - -

3.text/plain

GET 请求结果：

同application/x-www-form-urlencoded

POST 请求结果：

port 58542 连接成功...
- - - 接受数据长度: 852 - - -
POST /hello HTTP/1.1
Host: localhost:8888
Connection: keep-alive
Content-Length: 46
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: http://localhost:63343
Content-Type: text/plain
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:63343/
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: Webstorm-c43476a5=a28ffbe7-bdbe-4e32-a99b-dc3a9e8ec33c; Hm_lvt_e9e114d958ea263de46e080563e254c4=1621171338

username=active pirate
age=18
myfile=a.txt

port 58542 连接结束...
- - - - - - - - - - - - - - - - - - - -

标签：

您可能还喜欢...

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注