ファイル入力要素を非表示にして「参照」ボタンに置​​き換える方法

参照ボタンでファイル入力要素をスタイリッシュに隠す

<input type="file"> のデフォルトの外観要素には、選択したファイル パスを表示するテキスト フィールドが含まれます。ただし、ファイル パスが表示されない複数ファイルのアップロードなどの状況では、[参照] ボタンのみが表示される、より合理化されたインターフェイスを好む場合があります。

これを実現するには、CSS と JavaScript を活用できます。

<input type="file">

このコード スニペットは、ID が "selectedFile" の隠しファイル入力要素と、onclick イベント リスナーを備えた "Browse..." というラベルの表示ボタンを作成します。ボタンをクリックすると、非表示のファイル入力要素のクリック イベントがトリガーされ、表示されるテキスト フィールドなしでファイルを選択できるようになります。

たとえば、Morningz.com から引用した複数ファイルのアップロード コードを使用している場合です。 、このテクニックを統合してユーザー インターフェイスを強化できます:

<input type="file">

この変更により、複数ファイルのアップロード ページには [参照...] ボタンのみが表示され、よりユーザー フレンドリーなページが提供されます。そして合理化されたエクスペリエンス。

以上がファイル入力要素を非表示にして「参照」ボタンに置​​き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。