Apa arti enctype = 'multipart / form-data'?

Apa arti enctype='multipart/form-data' dalam formulir HTML dan kapan kami harus menggunakannya?

1114
24 дек. EBAG ditetapkan 24 Desember . 2010-12-24 15:19 '10 pada 15:19 2010-12-24 15:19
@ 9 jawaban

Saat Anda membuat permintaan POST, Anda harus menyandikan data yang entah bagaimana membentuk badan permintaan.

Formulir HTML menyediakan tiga metode pengkodean.

  • application/x-www-form-urlencoded (default)
  • multipart/form-data
  • text/plain

Pekerjaan menambahkan application/json dilakukan, tetapi dihentikan.

(Pengkodean lainnya dimungkinkan dengan permintaan HTTP yang dihasilkan menggunakan cara lain selain mengirim formulir HTML.)

Kekhususan format tidak penting bagi sebagian besar pengembang. Poin-poin penting adalah:

  • Jangan pernah gunakan text/plain .

Ketika Anda menulis kode pada klien:

  • gunakan multipart/form-data saat formulir Anda berisi elemen <input type="file">
  • jika tidak, Anda dapat menggunakan multipart/form-data atau application/x-www-form-urlencoded tetapi application/x-www-form-urlencoded akan lebih efisien.

Ketika Anda menulis kode di sisi server:

  • Gunakan pustaka pemrosesan formulir pra-tertulis.

Sebagian besar (misalnya, Perl CGI->param atau yang diwakili dalam superglobal PHP $_POST ) akan menangani perbedaan untuk Anda. Jangan mencoba menganalisis data mentah yang diterima oleh server.

Terkadang Anda akan menemukan perpustakaan yang tidak bisa menangani kedua format. Perpustakaan Node.js paling populer untuk memproses data formulir adalah body-parser, yang tidak dapat menangani permintaan multikomponen (tetapi memiliki dokumentasi yang merekomendasikan beberapa alternatif yang mereka bisa).


Jika Anda menulis (atau men-debug) pustaka untuk menganalisis atau menghasilkan data mentah, Anda harus mulai mengkhawatirkan formatnya. Anda juga bisa mencari tahu tentang ini demi kepentingan.

application/x-www-form-urlencoded lebih atau kurang cocok dengan string kueri di akhir URL.

multipart/form-data jauh lebih rumit, tetapi memungkinkan Anda untuk memasukkan seluruh file dalam data. Contoh hasilnya dapat ditemukan dalam spesifikasi HTML 4 .

text/plain diperkenalkan dalam HTML 5 dan hanya berguna untuk debugging - dari spesifikasi : mereka tidak dapat diartikan secara andal oleh komputer - dan saya akan mengatakan bahwa orang lain digabungkan dengan alat (misalnya, tab Net di alat pengembang kebanyakan browser) lebih baik untuk ini) .

1247
24 дек. Jawabannya diberikan Quentin 24 Des. 2010-12-24 15:21 '10 pada 15:21 2010-12-24 15:21

kapan kita harus menggunakannya

Jawaban Quentin benar: gunakan multipart/form-data jika form berisi file untuk diunggah, dan application/x-www-form-urlencoded sebaliknya, yang merupakan default jika Anda menghi>enctype .

Saya akan:

  • tambahkan lagi tautan HTML5
  • jelaskan mengapa dia benar dengan sebuah contoh

Tautan HTML5

Ada tiga kemungkinan untuk enctype :

Cara menghasilkan contoh

Segera setelah Anda melihat contoh masing-masing metode, menjadi jelas bagaimana mereka bekerja, dan kapan Anda harus menggunakan masing-masing metode.

Anda dapat memberikan contoh menggunakan:

Simpan formulir ke file .html minimal:

 <!DOCTYPE html> <html > 

Kami menetapkan nilai teks default a> , yang berarti aωb karena ω adalah U+03C9 , yang merupakan byte 61 CF 89 62 di UTF-8.

Buat unduhan:

 echo 'Content of a.txt.' > a.txt echo '<!DOCTYPE html><title>Content of a.html.</title>' > a.html # Binary file containing 4 bytes: 'a', 1, 2 and 'b'. printf 'a\xCF\x89b' > binary 

Mulai server gema kecil kami:

 while true; do printf '' | nc -l 8000 localhost; done 

Buka HTML di browser Anda, pilih file, klik "Kirim" dan periksa terminal.

nc mencetak permintaan yang diterima.

Diuji pada: Ubuntu 14.04.3, nc BSD 1.105, Firefox 40.

data multipart / formulir

Firefox mengirim:

 POST / HTTP/1.1 [[ Less interesting headers ... ]] Content-Type: multipart/form-data; boundary=---------------------------735323031399963166993862150 Content-Length: 834 -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="text1" text default -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="text2" aωb -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="file1"; filename="a.txt" Content-Type: text/plain Content of a.txt. -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="file2"; filename="a.html" Content-Type: text/html <!DOCTYPE html><title>Content of a.html.</title> -----------------------------735323031399963166993862150 Content-Disposition: form-data; name="file3"; filename="binary" Content-Type: application/octet-stream aωb -----------------------------735323031399963166993862150-- 

Untuk file biner dan bidang teks, 61 CF 89 62 byte (a aωb ke UTF-8) secara harfiah dikirim. Anda dapat memeriksanya dengan nc -l localhost 8000 | hd nc -l localhost 8000 | hd nc -l localhost 8000 | hd nc -l localhost 8000 | hd yang mengatakan byte:

 61 CF 89 62 

dikirim ( 61 == 'a' dan 62 == 'b').

Oleh karena itu, jelas bahwa:

  • Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 menetapkan tipe konten untuk multipart/form-data dan mengatakan bahwa bidang dipisahkan oleh garis boundary diberikan.

  • Setiap bidang menerima beberapa subjudul sebelum datanya: Content-Disposition: form-data; , bidang name , name filename , dan kemudian data.

    Server membaca data ke garis batas berikutnya. Browser harus memilih perbatasan yang tidak akan muncul di bidang mana pun, sehingga perbatasan ini dapat bervariasi di antara permintaan.

    Karena kami memiliki batas unik, tidak ada enkripsi data yang diperlukan: data biner dikirim apa adanya.

    TODO: Berapa ukuran batas optimal ( log(N) saya masukkan), dan nama / waktu berjalan dari algoritma yang menemukannya? Untuk pertanyaan: https://cs.stackexchange.com/questions/39687/find-the-shortest-afterence-that-is-not-a-sub- berikutnyaence- of-a- set- of- afterence

  • Content-Type secara otomatis terdeteksi oleh browser.

    Bagaimana tepatnya hal ini ditentukan, diberikan pada: Bagaimana cara browser menentukan jenis pantomim dari file yang diunduh?

application / x-www-form-urlencoded

Sekarang ubah enctype ke application/x-www-form-urlencoded , restart browser Anda dan kirim lagi.

Firefox mengirim:

 POST / HTTP/1.1 [[ Less interesting headers ... ]] Content-Type: application/x-www-form-urlencoded Content-Length: 51 text1=text+default> 

Jelas bahwa data file tidak dikirim, hanya nama dasar. Jadi ini tidak bisa digunakan untuk file.

Sedangkan untuk bidang teks, kita melihat bahwa karakter yang dapat dicetak seperti a dan b dikirim dalam satu byte, sementara karakter yang tidak dapat dicetak seperti 0xCF dan 0x89 masing-masing mengambil 3 byte : %CF%89 !

perbandingan

Unduhan file sering mengandung banyak karakter yang tidak dapat dicetak (seperti gambar), sementara bentuk teks hampir tidak pernah dilakukan.

Dari contoh-contoh yang telah kita lihat bahwa:

  • multipart/form-data : menambahkan beberapa byte overhead ke pesan dan harus meluangkan waktu menghitungnya, tetapi mengirimkan setiap byte dalam satu byte.

  • application/x-www-form-urlencoded : memiliki batas satu byte untuk setiap bidang ( > ), tetapi menambahkan faktor biaya linier 3x untuk setiap karakter yang tidak dicetak.

Oleh karena itu, bahkan jika kita dapat mengirim file dengan application/x-www-form-urlencoded , kita tidak mau, karena tidak efisien.

Namun untuk karakter yang dapat dicetak yang ditemukan di bidang teks, itu tidak masalah dan membuat lebih sedikit overhead, jadi kami hanya menggunakannya.

345
07 февр. balasan yang diberikan oleh Ciro Santilli 改造 改造 中心 六四 法轮功 法轮功 07 Feb. 2015-02-07 12:52 '15 pada 12:52 2015-02-07 12:52

enctype='multipart/form-data adalah jenis penyandian yang memungkinkan Anda mengirim file melalui POST. Sederhananya, tanpa penyandian ini, file tidak dapat dikirim melalui POST.

Jika Anda ingin mengizinkan pengguna untuk mengunggah file melalui formulir, Anda harus menggunakan enctype ini.

79
24 дек. Jawabannya diberikan oleh Matt Asbury pada 24 Desember. 2010-12-24 15:49 '10 pada 15:49 2010-12-24 15:49

Saat Anda mengirimkan formulir, Anda mencoba untuk mengatakan bahwa browser Anda mengirim pesan HTTP di jaringan melalui protokol HTTP, terlampir dengan baik dalam struktur pesan protokol TCP / IP. Saat mengirim data, Anda dapat menggunakan metode POST atau GET HTTP.

  • POST memberi tahu browser Anda untuk membuat pesan HTTP dan meletakkan semua konten di badan pesan (cara yang sangat berguna untuk melakukan sesuatu yang lebih aman dan fleksibel).
  • GET akan mengirim data formulir dalam string kueri. Ini memiliki beberapa batasan mengenai presentasi dan panjang data.

Pernyataan cara mengirim formulir Anda ke server

Atribut enctype masuk akal ketika menggunakan metode POST . Jika ditentukan, ia memberi tahu browser untuk mengirimkan formulir, menyandikan kontennya dengan cara tertentu. Dari MDN - Bentuk jenis :

Jika nilai atribut metode dikirim, enctype adalah jenis konten MIME yang digunakan untuk mengirim formulir ke server.

  • application/x-www-form-urlencoded : ini adalah nilai default. Ketika formulir dikirimkan, semua nama dan nilai dikumpulkan, dan URL dikodekan di baris terakhir.
  • multipart/form-data : karakter TIDAK dikodekan. Ini penting ketika formulir memiliki kontrol unggah file. Anda ingin mengirim file biner, dan ini memastikan bahwa bit stream tidak berubah.
  • text/plain : spasi dikonversi, tetapi penyandian tidak lagi dilakukan.

Keamanan

Saat mengirimkan formulir, mungkin ada beberapa masalah keamanan seperti yang ditunjukkan dalam RFC 7578, Bagian 7: Formulir Data Komposit - Pertimbangan Keamanan :

Semua perangkat lunak pemrosesan formulir harus memproses data formulir yang disediakan pengguna.
dengan sensitivitas karena sering mengandung rahasia atau pribadi
mengidentifikasi informasi. Browser web telah banyak menggunakan formulir pelengkapan otomatis; mereka dapat digunakan untuk menipu pengguna
tanpa sadar mengirim informasi rahasia ketika mengisi sebaliknya
tugas yang tidak berbahaya. multipart / form-data tidak menyediakan fungsi apa pun.
untuk memverifikasi integritas, memastikan kerahasiaan, menghindari pengguna
kebingungan atau fitur keamanan lainnya; masalah ini seharusnya
ditangani oleh aplikasi untuk mengisi formulir dan menafsirkan formulir ini.

Aplikasi yang menerima formulir dan memprosesnya harus berhati-hati untuk tidak mengirim data ke situs pemroses formulir permintaan yang tidak dimaksudkan untuk dikirim.

Ini penting ketika menafsirkan nama file konten.
Field header lokasi untuk tidak menimpa file secara tidak sengaja
ruang file penerima.

Ini menyangkut Anda jika Anda seorang pengembang dan server Anda akan memproses formulir yang dikirimkan oleh pengguna yang mungkin berisi informasi rahasia.

68
24 дек. Jawabannya diberikan oleh Andry 24 Des 2010-12-24 20:50 '10 pada 20:50 2010-12-24 20:50

enctype='multipart/form-data' berarti bahwa tidak ada karakter yang akan dikodekan. oleh karena itu, tipe ini digunakan ketika mengunggah file ke server.
Dengan demikian, multipart/form-data digunakan ketika formulir mengharuskan data biner, seperti konten file, dimuat

29
04 июля '13 в 12:13 2013-07-04 12:13 jawabannya diberikan oleh GP Singh pada 04 Juli '13 pada 12:13 2013-07-04 12:13

Atur atribut metode POST, karena konten file tidak dapat ditempatkan di parameter URL menggunakan formulir.

Tetapkan nilai enctype untuk multipart / form-data, karena data akan dibagi menjadi beberapa bagian, satu untuk setiap file ditambah satu untuk teks dari form tubuh yang dapat dikirim bersama mereka.

8
25 сент. jawabannya diberikan sandy 25 september. 2013-09-25 14:53 '13 pada 14:53 2013-09-25 14:53

Biasanya ini adalah ketika Anda memiliki formulir POST yang harus mengunduh file sebagai data ... itu akan memberi tahu server bagaimana ia akan menyandikan data yang ditransfer, dalam hal ini tidak akan disandikan, karena hanya akan mentransfer dan mengunggah file ke server, misalnya saat mengunduh gambar atau pdf

0
10 марта '16 в 12:29 2016-03-10 12:29 jawabannya diberikan oleh Eric pada 10 Maret '16 pada 12:29 2016-03-10 12:29
  • Atribut enctype ( ENC ode TYPE ) menentukan bagaimana data formulir harus dikodekan ketika dikirim ke server.
  • multipart / form-data adalah salah satu nilai atribut enctype yang digunakan dalam elemen form di mana file dimuat. Multi-bagian berarti bahwa formulir ini dibagi menjadi beberapa bagian dan dikirim ke server.
0
27 дек. Balas diberikan oleh Premraj 27 Des 2015-12-27 04:29 '15 pada 4:29 2015-12-27 04:29

Atribut enctype menunjukkan bagaimana formulir ini harus dikodekan ketika dikirim ke server.

Atribut enctype hanya dapat digunakan jika method = "post".

Tidak ada karakter yang dikodekan. Nilai ini diperlukan saat menggunakan formulir yang memiliki kontrol unggah file.

Dari W3Schools

-1
12 нояб. Jawabannya diberikan oleh Rishad pada 12 November. 2018-11-12 01:52 '18 pada 1:52 2018-11-12 01:52

Pertanyaan lain tentang tag atau Ajukan Pertanyaan