ファイル入力要素の外観と機能をカスタマイズするにはどうすればよいですか?

ファイル入力要素タイプのカスタマイズ

この質問は、特に背景画像を実装するための、ファイル入力要素タイプのカスタマイズを中心にしています。

ブラウザの互換性を考慮せずにこれを実現するには、提供されている次の手順に従います。手順:

1. HTML フォーム:

   • 「クリックしてアップロード」ボタン (id= の要素) を備えた HTML フォームを作成します。 yourBtn") と隠しファイル入力 (id="upfile" の要素、によって隠されています)スタイリング)。

2. JavaScript 関数:

   • 隠しファイルをトリガーする JavaScript 関数 (getFile()) を追加します。 「クリックしてアップロード」ボタンが押されたときに入力

このアプローチにより、ブラウザー固有のニュアンスを気にすることなく、入力要素のスタイルを無制限に設定できます。

さらに、プロセスをさらに簡素化するために、次のようにします。自動ファイルを使用した完全な例アップロード:

HTML:

<style>
#yourBtn {
  position: relative;
  ...
}
</style>
<form action="#" method="POST" enctype="multipart/form-data" name="myForm">
  <div>

JavaScript:

function getFile() {
  document.getElementById("upfile").click();
}
function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

このコードは、ボタンのスタイル設定とクリックを組み合わせています。入力が変更されたときにフォームを送信することによる自動ファイルアップロードによるイベント処理。

以上がファイル入力要素の外観と機能をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。