画像プレビュー付きのアップロードフォームの完全な HTML

画像プレビュー付きのアップロードフォームの完全な HTML

画像プレビュー機能付きのアップロードフォーム、完全なHTMLコードは次のとおりです。
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
<title>画像プレビュー機能付きアップロードフォーム jb51.net</title>
<スクリプト>
関数 viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
スタイル
境界線を1にします。
}
}
</スクリプト>
</head>
<本文>
<中央>
<フォーム>
<input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" />
<br />
</フォーム>
<img name="showimg" id="showimg" src="" style="display:none;" alt="プレビュー画像" />
<br />
</div>
<div style="display:none">
</div>
</center>
</本文>
</html>

<<:  Zabbix ベースの Jenkins プロセス監視の詳細な説明

>>:  要素 UI に基づいてクエリ コンポーネントを段階的にカプセル化する方法

推薦する

Spring Boot 階層化パッケージング Docker イメージの実践と分析 (推奨)

目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...

MySQLのSQLモードの特徴のまとめ

序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...

mysql-canal-rabbitmq のインストールと展開の非常に詳細なチュートリアル

目次1.1. MySQL binlog を有効にする1.2. RabbitMQ の交換とキューを構成...

Windows 10 Home Edition に Docker をインストールする方法

最近、プロジェクトをアップグレードするために Docker を使用しました。これまで使用したことがな...

高可用性 Web クラスターを実装するための Keepalived+Nginx+Tomcat サンプル コード

高可用性 Web クラスターを実現する Keepalived+Nginx+Tomcat 1. Ngi...

vue3 で vue-router を使用するための完全な手順

序文ルーティングの管理は、ほとんどのシングルページ アプリケーションにとって不可欠な機能です。 Vu...

HTML でフロートをクリアする 2 つの方法

1. クリアフローティング法1前の親要素の高さを設定します。注: エンタープライズ開発では、可能であ...

現在のマウススライドの座標を取得するVue+openlayer5メソッド

序文: Vue プロジェクトで現在のマウスの座標を取得するにはどうすればよいでしょうか。ここで共有す...

ウェブデザイナーもウェブコーディングを学ぶ必要がある

多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...

Tomcat マルチレイヤーコンテナの設計に関する簡単な説明

目次コンテナ階層サーブレットの検索を要求するプロセス仕組みTomcat のコンテナは Servlet...

MySQL における datetime と timestamp の違いと選択

目次1 違い1.1 スペース占有1.2 表現範囲1.3 タイムゾーン2 テスト3つの選択肢MySQL...

CSSを使用してTDのINPUTの幅を設定する

最近、C# を使用して Web プログラムを作成していたときに、次のような問題が発生しました。 Te...

フレックスレイアウトでコンテナ内のコンテンツを維持するためのソリューションの詳細な説明

モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...

ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション

ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...

MySQLでよく使われる演算子と関数の概要

まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...