web-dev-qa-db-ja.com

Enctype = 'multipart/form-data'とはどういう意味ですか？

HTMLフォームでenctype='multipart/form-data'とはどういう意味ですか、いつ使用するべきですか？

htmlhttp-headersmultipartform-data
1186
EBAG

POSTリクエストを行うときは、リクエストの本体を形成するデータを何らかの方法でエンコードする必要があります。

HTMLフォームは3つのエンコード方法を提供します。

  • application/x-www-form-urlencodedデフォルト）
  • multipart/form-data
  • text/plain

application/json を追加する作業は行われていましたが、それは放棄されました。

（HTMLフォーム送信以外の手段を使用して生成されたHTTP要求では、他のエンコードも可能です。）

フォーマットの詳細は、ほとんどの開発者にとって重要ではありません。重要な点は次のとおりです。

  • 決してtext/plainを使用しないでください。

クライアントサイドコードを書くとき：

  • フォームにmultipart/form-data要素が含まれている場合は<input type="file">を使用してください
  • それ以外の場合はmultipart/form-dataまたはapplication/x-www-form-urlencodedを使用できますが、application/x-www-form-urlencodedの方が効率的です。

サーバーサイドコードを書くとき：

  • 事前作成されたフォーム処理ライブラリを使用する

ほとんどのもの（PerlのCGI->paramやPHPの$_POST superglobalによって公開されているものなど）は、その違いを処理します。サーバーが受け取った生の入力をパースしようとしないでください。

時にはあなたは両方のフォーマットを扱うことができないライブラリを見つけるでしょう。フォームデータを扱うためのNode.jsの最も人気のあるライブラリは body-parser です。

生データを解析または生成するためのライブラリを作成（またはデバッグ）している場合は、フォーマットについて心配する必要があります。あなたはまた興味のためにそれについて知りたいと思うかもしれません。

application/x-www-form-urlencodedは、URLの最後にあるクエリ文字列とほぼ同じです。

multipart/form-dataはかなり複雑ですが、ファイル全体をデータに含めることができます。結果の例は HTML 4 specification にあります。

text/plainはHTML 5で導入されたもので、デバッグにのみ有用です。 the spec ：_から。（これらはcomputerでは確実に解釈できません。ほとんどのブラウザの開発者向けツールはそれに向いています。

1333
Quentin

いつ使うべきか

Quentinの答えは正しいです。フォームにファイルのアップロードが含まれる場合はmultipart/form-dataを、それ以外の場合はapplication/x-www-form-urlencodedを使用します。enctypeを省略した場合はこれがデフォルトになります。

私はするつもりだ：

  • hTML5参照をさらに追加する
  • 説明 なぜ 彼はフォーム送信の例で正しい

HTML5の参照

enctypeには 3つの可能性 があります：

例を生成する方法

それぞれの方法の例を見れば、それらがどのように機能するか、そしていつそれぞれを使用すべきかが明らかになります。

あなたは例を使って例を作り出すことができます：

フォームを最小限の.htmlファイルに保存します。

<!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>

デフォルトのテキスト値をa&#x03C9;bに設定します。これは、aωbはωであり、これはUTF-8のバイトU+03C9であるため、61 CF 89 62を意味します。

アップロードするファイルを作成します。

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

私たちの小さなエコーサーバーを実行します。

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

ブラウザでHTMLを開き、ファイルを選択して送信をクリックして端末を確認してください。

ncは受け取った要求を表示します。

テスト済み：Ubuntu 14.04.3、nc BSD 1.105、Firefox 40。

マルチパート/フォームデータ

Firefoxが送信しました：

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--

バイナリファイルとテキストフィールドの場合、バイト61 CF 89 62UTF-8のaωb）は文字通りに送信されます。 nc -l localhost 8000 | hdを使ってそれを検証することができます。

61 CF 89 62

送信されました（61 == 'a'および62 == 'b'）。

したがって、次のことが明らかです。

application/x-www-form-urlencoded

enctypeをapplication/x-www-form-urlencodedに変更し、ブラウザをリロードして、再送信してください。

Firefoxが送信しました：

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

明らかにファイルデータは送信されず、ベースネームのみが送信されました。したがって、これはファイルには使用できません。

テキストフィールドに関しては、aやbのような通常の印刷可能文字が1バイトで送信され、0xCFや0x89のような印刷不可能文字は 3バイト each：%CF%89！

比較

ファイルのアップロードには印刷できない文字（画像など）が多く含まれていますが、テキスト形式ではほとんど含まれていません。

例から私達はそれを見た：

  • multipart/form-data：メッセージに数バイトの境界オーバーヘッドを追加し、それを計算するのにしばらく時間を費やす必要がありますが、各バイトを1バイトで送信します。

  • application/x-www-form-urlencoded：フィールドごとに1バイト境界（&）がありますが、すべての非印刷可能文字について、 3x のlinearオーバーヘッド係数が追加されます。

したがって、たとえapplication/x-www-form-urlencodedを付けてファイルを送信できたとしても、やりたくないでしょう。それはとても非効率的だからです。

しかし、テキストフィールドにある印刷可能な文字については、それは問題ではなく、オーバーヘッドも少なくなるので、ここで使用しています。

370
Ciro Santilli 新疆改造中心996ICU六四事件

enctype='multipart/form-dataは、 _ post _ を介してファイルを送信できるようにするエンコーディングタイプです。簡単に言うと、このエンコーディングがないと、ファイルは _ post _ を介して送信できません。

ユーザーがフォームを介してファイルをアップロードできるようにしたい場合は、 enctype を使用する必要があります。

83
Matt Asbury

フォームを送信するときは、HTTPプロトコルを介して、TCP/IPプロトコルのメッセージ構造に正しく包まれたネットワーク上のメッセージを送信するようにブラウザに指示します。 HTMLページには、<form>sを使用してサーバーにデータを送信する方法があります。

フォームが送信されると、HTTPリクエストが作成されてサーバーに送信されると、メッセージにはフォーム内のフィールド名とユーザーが入力した値が含まれます。この転送はPOSTまたはGET HTTPメソッド で発生する可能性があります。

  • POST は、HTTPメッセージを作成し、すべてのコンテンツをメッセージの本文に入れるようにブラウザに指示します（非常に便利な方法で、より安全で柔軟です）。
  • GET は クエリ文字列 でフォームデータを送信します。データの表現と長さに関していくつかの制約があります。

フォームをサーバーに送信する方法を述べる

属性enctypeは、POSTメソッドを使用する場合にのみ意味があります。指定すると、ブラウザはそのコンテンツを特定の方法でエンコードしてフォームを送信するように指示します。 From MDN - フォームenctype ：

Method属性の値がpostの場合、enctypeはフォームをサーバーに送信するために使用されるコンテンツのMIMEタイプです。

  • application/x-www-form-urlencoded：これはデフォルトです。フォームが送信されると、すべての名前と値が収集され、最後の文字列に対して URL Encoding が実行されます。
  • multipart/form-data：文字はエンコードされていません。フォームにファイルアップロードコントロールがある場合、これは重要です。あなたはファイルバイナリを送りたいと思うでしょう、そしてこれはビットストリームが変更されないことを確実にします。
  • text/plain：スペースは変換されますが、それ以上エンコードは実行されません。

セキュリティ

フォームを送信するとき、 RFC 7578セクション7：マルチパートフォームデータ - セキュリティに関する考慮事項 ：に記載されているように、セキュリティ上の問題が発生する可能性があります。

すべてのフォーム処理ソフトウェアはユーザー提供のフォームデータを扱うべきです
機密情報または個人情報が含まれることが多いため、慎重に
識別情報Webブラウザではフォームの「自動入力」機能が広く使用されています。これらはユーザをだましてしまうために使われるかもしれません
そうでない場合は、知らないうちに機密情報を送信する
無害な仕事multipart/form-dataは機能を提供しません
完全性の確認、機密性の確保、ユーザーの回避
混乱、またはその他のセキュリティ機能これらの懸念は
フォーム記入およびフォームデータ解釈アプリケーションによって対処されます。

フォームを受信して​​処理するアプリケーションは、送信を意図していない要求元のフォーム処理サイトにデータを返さないように注意する必要があります。

コンテンツのファイル名を解釈するときに重要です。
不注意でファイル内のファイルを上書きしないようにするための処置ヘッダーフィールド
受信者のファイルスペース.

あなたが開発者であり、あなたのサーバーがユーザーから送信された機密情報を含む可能性のあるフォームを処理する場合、これはあなたに関係します。

72
Andry

enctype='multipart/form-data'は、文字がエンコードされないことを意味します。これが、ファイルをサーバーにアップロードするときに使用される理由です。
したがって、ファイルの内容などのバイナリデータをアップロードするためにフォームにバイナリデータが必要な場合は、multipart/form-dataを使用します

30
GP Singh

フォームを使用してファイルの内容をURLパラメータ内に配置することはできないため、method属性をPOSTに設定します。

データは複数の部分に分割されるため、enctypeの値をmultipart/form-dataに設定します。1つはファイルごとに、もう1つはそれらと共に送信される可能性のあるフォーム本体のテキスト用です。

8
sandy
  • enctype（ _ enc _ ode _ type _ ）属性は、フォームデータをサーバーに送信するときにエンコードする方法を指定します。
  • multipart/form-data はenctype属性の値の1つで、ファイルのアップロードがあるフォーム要素で使用されます。 マルチパート は、フォームデータが マルチパート に分割されてサーバーに送信されることを意味します。
0
Premraj

通常、ファイルアップロードをデータとして受け取る必要があるPOSTフォームがある場合です。転送されたデータをエンコードする方法をサーバーに通知します。このような場合はエンコードされません。例えば画像やpdfをアップロードするときのように、ファイルをサーバーに転送してアップロードするだけです。

0
Eric