Trong quá trình làm việc với API, mình gặp một chút vấn đề với kiểu mã hóa dữ liệu khi submit form và gửi dữ liệu cho server. Sau khi tìm hiểu, mình muốn chia sẻ lại kiến thức này cũng mọi người, hy vọng nó sẽ giúp các bạn hiểu phần nào.

Bạn đang xem: Enctype= multipart/form-data là gì

1. Giới thiệu

Bây giờ, ta sẽ đi sâu vào các loại này hơn nhé.

2. URL Encoded Form

Ví dụ:

Ở đây, phương thức đước sử dụng là phương thức POST, như vậy dữ liệu sẽ có trong body của request. Kiểu mã hóa được dùng ở đây là kiểu URL Encoded. Hiểu đơn giản thì dữ liệu được biểu diễn dưới dạng (key, value), nối với nhau bằng ký hiệu & thành một chuỗi (long string). Trong mỗi cặp (key, value), key và value tách nhau bở dấu =.

Ví dụ: key1=value1&key2=value2

Với form như trong ví dụ thì dữ liệu gửi lên sẽ là: username=sidthesloth&password=slothsecret.

Ngoài ra, để ý thuộc tính action của form có /urlencoded?firstname=sid&lastname=sloth. Dữ liệu này và dữ liệu truyền lên từ form giống nhau về kiểu mã hóa.

*
Ta thấy, ở trường Content-Type trên header của request có xác định kiểu mã hóa là application/x-www-form-urlencoded.

3. Multipart Forms

Xem thông tin của request:

*
Chú ý trường Content-Type và payload của request.

Xem thêm: Tên Tiếng Nhật Của Bạn Là Gì ? Cách Viết Họ Tên Tiếng Nhật Chính Xác

Content-Type Header

Ngoài giá trị multipart/form-data, ở Content-Type còn có giá trị boundary. Giá trị này do trình duyệt tạo ra, nhưng nếu cần thì ta vẫn có thể xác định nó.

Request Body

Mỗi cặp (key, value) được biểu diễn dưới dạng:

-->Content-Disposition: form-data; name=">">Kết thúc payload sẽ là giá trị của boundary nối với kí hiệu --.

-->Content-Disposition: form-data; name=">">-->Content-Disposition: form-data; name=">">-->--Như vậy, với kiểu mã hóa application/x-www-form-urlencoded, mỗi cặp (key, value) được phân cách với nhau bằng dấu & cho chép server biết nơi bắt đầu và kết thúc của một tham số. CÒn với kiểu multipart/form-data, các giá trị boundary thực hiện công việc này.

Ví dụ, nếu đặt boundary=XXX thì

Content-Type: multipart/form-data; boundary=XXXpayload có dạng:

--XXXContent-Disposition: form-data; name="username"sidthesloth--XXXContent-Disposition: form-data; name="password"slothsecret--XXX--Như vậy, trình duyệt sẽ hiểu được bắt đầu và kết thúc của các giá trị.

4. Text/plain Forms

Kiểu mã hóa này gần giống với kiểu URL encoded forms, ngoại trừ việc các trường của form không được mã hóa khi gửi lên server. Kiểu này không được dùng rộng rãi vì định dạng này có thể đọc được và kém bảo mật. Để hiểu hơn, bạn có thể đọc tại đây.

5. Tổng kết

Trên đây là một số tìm hiểu của mình về các loại HTML Form Encoding. Tuy chưa thật sự hoàn chỉnh nhưng mong rằng có thể giúp các bạn hiểu và phân biệt cơ bản. Cảm ơn các bạn.

Tài liệu tham khảo

https://dev.to/sidthesloth92/understanding-html-form-encoding-url-encoded-and-multipart-forms-3lpa#:~:text=application%2Fx-www-form,user wants to upload files

https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *