トリガーメソッドを使用して、ファイルタイプの入力をクリックせずにポップアップファイル選択ダイアログボックスを実現します。

トリガーメソッドを使用して、ファイルタイプの入力をクリックせずにポップアップファイル選択ダイアログボックスを実現します。
トリガー メソッドを使用できます。JavaScript にはネイティブのトリガー関数はありません。自分で作成するか、jQuery の実装を直接使用できます。

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

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.onclick = function(){alert("button1");trigger(button2,"onclick");}
button2.onclick = function(){alert("button2");}
関数トリガ(要素、イベント)
{ele[イベント]();}

もっと簡単な方法として、クリックする画像、ハイパーリンク、その他の div を入力で覆い、入力を完全に透明に設定して、画像をクリックすると実際に入力をクリックするようにすることもできます。

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

<div class="ps-image" style="width:300px;height:300px;border:0px sold red; background:url('/images/ps.png')">
<input type="file" id="file" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>
</div>

<<:  CCS におけるマージン: トップ崩壊問題を解決する

>>:  Centos8 に nginx1.9.1 をインストールする詳細な手順

推薦する

Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法

序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...

htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...

HTML はモバイル上で固定フローティング半透明検索ボックスを実装します

質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

mysql5.7.18のインストールと初期パスワードの変更方法

CentosでのMySQLのインストールについては、以前の記事を参照してください。 Centos7....

Dockerがコンテナサービスを停止または削除できない問題の解決策

序文今日、開発者から、コンテナ サービスを停止、rm (docker rm -f)、または強制終了で...

レスポンシブWebデザイン学習（2） — 動画をレスポンシブにすることはできるのか？

前回のエピソードレビュー:昨日は、ページがさまざまなデバイス サイズにどのように対応するかについて説...

MySQLテーブルを削除する方法

MySQL でテーブルを削除するのは非常に簡単ですが、削除コマンドを実行するとすべてのデータが消えて...

ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...

Dockerは異常なコンテナ操作を排除する

この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...

Dockerを使用して開発環境を構築する方法を素早く習得します

プラットフォームが成長し続けるにつれて、プロジェクトの研究開発は、開発者向けのさまざまな外部環境、特...

単語のグループ化シーケンスと複数フィールドのグループ化のための MySQL グループ方法

ここで商品テーブルを作成しました。その中のデータを見てみましょう。 mysql> 商品から *...

CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...