Pertanyaan Apa artinya enctype = 'multipart / form-data'?


Apa yang terjadi enctype='multipart/form-data' berarti dalam HTML bentuk dan kapan kita harus menggunakannya?


1017
2017-12-24 12:19


asal


Jawaban:


Ketika Anda membuat permintaan POST, Anda harus menyandikan data yang membentuk badan permintaan dengan suatu cara.

Formulir HTML menyediakan tiga metode penyandian.

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

Pekerjaan sedang dilakukan untuk menambahkan application/json, tetapi itu telah ditinggalkan.

Spesifikasi format tidak penting bagi kebanyakan pengembang. Poin penting adalah:

Ketika Anda menulis kode sisi klien, semua yang perlu Anda ketahui adalah menggunakan multipart/form-data ketika formulir Anda termasuk <input type="file"> elemen.

Saat Anda menulis kode sisi server: Gunakan perpustakaan penanganan formulir prewritten (misalnya, Perl CGI->param atau yang diekspos oleh PHP $_POST superglobal) dan itu akan menjaga perbedaan untuk Anda. Jangan repot-repot mencoba mengurai input mentah yang diterima oleh server.

Tidak pernah digunakan text/plain.


Jika Anda menulis (atau debugging) pustaka untuk menguraikan atau menghasilkan data mentah, Anda harus mulai mengkhawatirkan formatnya. Anda mungkin juga ingin mengetahuinya demi bunga.

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

multipart/form-data secara signifikan lebih rumit tetapi memungkinkan seluruh file untuk dimasukkan dalam data. Contoh hasilnya dapat ditemukan di Spesifikasi HTML 4.

text/plain diperkenalkan oleh HTML 5 dan hanya berguna untuk debugging - from spesifikasi: Mereka tidak dapat diinterpretasikan oleh komputer - Dan saya berpendapat bahwa yang lain dikombinasikan dengan alat (seperti tab Bersih di alat pengembang sebagian besar browser) lebih baik untuk itu).


1147
2017-12-24 12:21



kapan sebaiknya kita menggunakannya

Jawaban Quentin benar: gunakan multipart/form-data jika formulir berisi file yang diunggah, dan application/x-www-form-urlencoded jika tidak, ini adalah default jika Anda mengabaikannya enctype.

Saya akan:

  • tambahkan beberapa referensi HTML5 lainnya
  • menjelaskan Mengapa dia benar dengan contoh pengiriman formulir

Referensi HTML5

Ada tiga kemungkinan untuk enctype:

Cara menghasilkan contoh

Setelah Anda melihat contoh dari masing-masing metode, itu menjadi jelas bagaimana mereka bekerja, dan kapan Anda harus menggunakan masing-masing metode.

Anda dapat menghasilkan contoh menggunakan:

  • nc -l atau server ECHO
  • agen pengguna seperti browser atau cURL

Simpan formulirnya hingga minimal .html mengajukan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>upload</title>
</head>
<body>
<form action="http://localhost:8000" method="post" enctype="multipart/form-data">
  <p><input type="text" name="text1" value="text default">
  <p><input type="text" name="text2" value="a&#x03C9;b">
  <p><input type="file" name="file1">
  <p><input type="file" name="file2">
  <p><input type="file" name="file3">
  <p><button type="submit">Submit</button>
</form>
</body>
</html>

Kami menetapkan nilai teks default ke a&#x03C9;b, yang berarti aωb karena ω aku s U+03C9, yang merupakan byte 61 CF 89 62 dalam UTF-8.

Buat file untuk diunggah:

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

Jalankan server gema kecil kami:

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

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

nc mencetak permintaan yang diterima.

Diuji pada: Ubuntu 14.04.3, ncBSD 1,105, Firefox 40.

multipart / form-data

Firefox dikirim:

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, byte 61 CF 89 62 (aωb dalam UTF-8) dikirim secara harfiah. Anda dapat memverifikasi dengan nc -l localhost 8000 | hd, yang mengatakan bahwa byte:

61 CF 89 62

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

Oleh karena itu jelas bahwa:

  • Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 mengatur tipe konten menjadi multipart/form-data dan mengatakan bahwa ladang dipisahkan oleh yang diberikan boundary tali.

  • setiap bidang mendapat beberapa sub-header sebelum datanya: Content-Disposition: form-data;, lapangan name, yang filename, diikuti oleh data.

    Server membaca data hingga string batas berikutnya. Peramban harus memilih batas yang tidak akan muncul di salah satu bidang, jadi inilah mengapa batas dapat bervariasi antar permintaan.

    Karena kita memiliki batas yang unik, tidak diperlukan pengkodean data: data biner dikirim sebagaimana adanya.

    TODO: berapa ukuran batas optimal (log(N) Saya bertaruh), dan nama / menjalankan waktu dari algoritma yang menemukannya? Ditanya di: https://cs.stackexchange.com/questions/39687/find-the-shortest-sequence-that-is-not-a-sub-sequence-of-a-set-of-sequences

  • Content-Type ditentukan secara otomatis oleh browser.

    Bagaimana itu ditentukan persis ditanyakan di: Bagaimana tipe mime dari file yang diunggah ditentukan oleh browser?

aplikasi / x-www-form-urlencoded

Sekarang ganti enctype untuk application/x-www-form-urlencoded, muat ulang browser, dan kirim ulang.

Firefox dikirim:

POST / HTTP/1.1
[[ Less interesting headers ... ]]
Content-Type: application/x-www-form-urlencoded
Content-Length: 51

text1=text+default&text2=a%CF%89b&file1=a.txt&file2=a.html&file3=binary

Jelas data file tidak dikirim, hanya nama-nama ruang. Jadi ini tidak dapat digunakan untuk file.

Adapun bidang teks, kita melihat bahwa karakter yang dapat dicetak seperti biasa a dan b dikirim dalam satu byte, sementara yang tidak dapat dicetak seperti 0xCF dan 0x89 Mengambil 3 byte setiap: %CF%89!

Perbandingan

Unggahan file sering kali berisi banyak karakter yang tidak dapat dicetak (misalnya gambar), sementara bentuk teks hampir tidak pernah dilakukan.

Dari contoh yang telah kita lihat bahwa:

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

  • application/x-www-form-urlencoded: memiliki batas satu byte per bidang (&), tetapi menambahkan a linear faktor overhead 3x untuk setiap karakter yang tidak dapat dicetak.

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

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


298
2018-02-07 09:52



enctype='multipart/form-data adalah jenis pengkodean yang memungkinkan file dikirim melalui POS. Cukup sederhana, tanpa pengkodean ini file tidak dapat dikirim POS.

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


72
2017-12-24 12:49



Saat mengirimkan formulir, Anda mencoba untuk mengatakan browser Anda untuk mengirim melalui protokol HTTP pesan di jaringan dengan benar diselimuti dalam struktur pesan protokol TCP / IP. Saat mengirim data, Anda dapat menggunakan POST atau GET  metodeuntuk mengirim data menggunakan protokol HTTP. POST memberi tahu browser Anda untuk membuat pesan HTTP dan meletakkan semua konten di badan pesan (cara yang sangat berguna dalam melakukan sesuatu, lebih aman dan juga fleksibel). GET memiliki beberapa kendala tentang representasi dan panjang data.

Menyatakan apa yang Anda kirim

Saat mengirim file, penting untuk memberi tahu protokol HTTP bahwa Anda mengirim file yang memiliki beberapa karakteristik dan informasi di dalamnya. Dengan cara ini dimungkinkan untuk secara konsisten mengirim data ke penerima dan membiarkannya membuka file dengan format saat ini dan seterusnya ... Ini adalah persyaratan dari protokol HTTP seperti yang ditunjukkan sini

Anda tidak dapat mengirim file menggunakan default enctype parameter karena penerima Anda mungkin mengalami masalah saat membacanya (pertimbangkan bahwa file adalah deskriptor untuk beberapa data untuk sistem operasi tertentu, jika Anda melihat hal-hal seperti ini, mungkin Anda akan mengerti mengapa sangat penting untuk menentukan yang berbeda enctype untuk file).

Jangan lupakan keamanan

Cara melakukan hal ini juga memastikan bahwa beberapa algoritme keamanan berfungsi pada pesan Anda. Informasi ini juga digunakan oleh router tingkat aplikasi untuk bertindak sebagai firewall baik untuk data eksternal.

Yah, seperti yang Anda lihat, itu bukan hal yang bodoh menggunakan yang spesifik enctype untuk file.


67
2017-12-24 17:50



enctype='multipart/form-data' berarti tidak ada karakter yang akan dienkode. itulah mengapa jenis ini digunakan saat mengunggah file ke server.
Begitu multipart/form-data digunakan ketika formulir membutuhkan data biner, seperti isi file, untuk diunggah


29
2017-07-04 09:13



Setel atribut metode ke POST karena konten file tidak dapat dimasukkan ke dalam parameter URL menggunakan formulir.

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


9
2017-09-25 11:53



  • enctype (ENCsyair pujian MENGETIK) atribut menentukan bagaimana bentuk-data harus dikodekan ketika mengirimkannya ke server.
  • multipart / form-data  adalah salah satu nilai dari atribut enctype, yang digunakan dalam elemen form yang memiliki file upload. multi-bagian berarti data formulir terbagi menjadi beberapa bagian dan kirim ke server.
    • metafora bagian : dokumen HTML memiliki dua bagian: kepala dan tubuh.

1
2017-12-27 01:29



Biasanya ini adalah ketika Anda memiliki formulir POST yang perlu mengambil file upload sebagai data ... ini akan memberi tahu server bagaimana ia akan menyandikan data yang ditransfer, dalam kasus seperti itu tidak akan dikodekan karena hanya akan mentransfer dan mengunggah file ke server, Seperti misalnya saat mengunggah gambar atau pdf


0
2018-03-10 09:29