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

フォームタグの 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 はウェブページの言語切り替えの国際化を実装します

推薦する

VMware に Linux システム (Redhat8) と仮想マシンのネットワーク構成をインストールする方法

目次1. VMwareをインストールする1.1 VMwareworkstationsをダウンロードし...

Vueは複数の画像の追加、表示、削除を実装します

この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...

canvas.toDataURL image/png エラー処理方法の推奨

問題の背景:再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生...

MySQL SQL 最適化チュートリアル: IN クエリと RANGE クエリ

まず、in() クエリについて説明します。 「High Performance MySQL」では、イ...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

初心者向けBootstrap 3.0学習ノート

この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...

HTML ページの部分更新の実装コード

イベント応答の更新: 要求されたときのみ更新1. JS HTML DOM または jQuery を介...

Tomcat サービスに Java 起動コマンドを追加する方法

私の最初のサーバープログラム現在、オンラインゲームの書き方を学んでいるので、サーバーサイドのプログラ...

MySQL 外部キー制約とテーブル関係の概要

目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...

純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...

MySQLは適切なストレージエンジンを選択します

データベースに関して最もよく聞かれる質問の 1 つは、現在のビジネス ニーズを満たす MySQL の...

Linux カーネルプログラミングにおけるコンテナの of() 関数の紹介

序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...

CSS マージンの重複と解決策の探索の詳細な説明

最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整...

HTMLテーブルレイアウトの実践的な使い方の詳しい説明

テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...