フォームタグの Enctype 属性とその応用例の紹介

Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定します。フォームに写真をアップロードするために使用されます。

エンコードの種類は 3 つあります。

application/x-www-form-urlencoded: 送信前にすべての文字をエンコードします (デフォルト)。これは標準のエンコード形式です。
multipart/form-data: 文字をエンコードしないでください。ファイルアップロードコントロールを含むフォームを使用する場合は、この値を使用する必要があります。
text/plain: フォームデータは、コントロールや書式設定文字を含まないプレーンテキストとしてエンコードされます。

例：

コードをコピー

コードは次のとおりです。

<フォームアクション="${pageContext.request.contextPath}/imageUpload_saveOrUpdate.action" メソッド="post" enctype="multipart/form-data">
<div>
<label>アップロード画像アドレスを選択してください:</label>
<input type="file" name="画像"/>
</div>
</div>
<div>
<input type="submit" value="アップロード"/>
</div>
</フォーム>

フォーム内の enctype="multipart/form-data" の意味は、フォームの MIME エンコーディングを設定することです。デフォルトでは、エンコード形式は application/x-www-form-urlencoded であり、ファイルのアップロードには使用できません。multipart/form-data が使用された場合にのみ、ファイルデータを完全に送信できます。

enctype="multipart/form-data" はバイナリデータをアップロードするために使用されます。

サーバー側の Request オブジェクトを通じて対応するフォームフィールドの値を取得する場合は、enctype 属性を application/x-www-form-urlencoded (つまり、省略可能なデフォルト値) に設定する必要があります。

ファイルをアップロードするときに enctype="multipart/form-data" を設定する必要があるのはなぜですか?

理由：enctype を multipart/form-data に設定した後、文字がエンコードされていない場合、データはバイナリ形式でサーバーに送信されます。このとき、request を使用すると、対応するフォームの値を直接取得することはできません。代わりに、ストリームオブジェクトを使用して、サーバーに送信されたバイナリデータをデコードし、データを読み取る必要があります。

ファイルをアップロードする場合は、encotype を multipart/form-data に設定する必要があります。

<<: CSS3 box-shadow プロパティの詳細な例

>>: Vue はウェブページの言語切り替えの国際化を実装します