検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML ファイル入力要素の外観と機能をカスタマイズするにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-12-14 00:44:10655ブラウズ

How Can I Customize the Appearance and Functionality of an HTML File Input Element?

スタイル入力タイプ ファイル? [重複]

ファイル入力要素の外観のカスタマイズは、特にブラウザーの互換性の問題により、困難な場合があります。ただし、これを達成するための効果的なテクニックがあります。

1. HTML と CSS のカスタマイズ:

  • を使用してカスタム ボタンを作成します。そして、CSS (背景画像、境界線) を使用してスタイルを設定します。
  • カスタム ボタンがクリックされたときに、JavaScript を使用してファイル入力のクリック イベントをトリガーします。
<form action="#">
  <div>
function getFile() {
  document.getElementById("upfile").click();
}

2.自動アップロード:

ファイルのアップロード プロセスを自動化するには、onchange イベントをファイル入力要素に追加します:

<form action="#">
  <div>
function sub(obj) {
  var file = obj.value;
  var fileName = file.split("\");
  document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
  document.myForm.submit();
  event.preventDefault();
}

3.完全な例:

この包括的な例には、自動送信を備えた完全に機能するカスタム ファイル アップロード フォームに必要なコードがすべて含まれています:

<html>
<style>
  #yourBtn {
    position: relative;
    top: 150px;
    font-family: calibri;
    width: 150px;
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed #BBB;
    text-align: center;
    background-color: #DDD;
    cursor: pointer;
  }
</style>
<script type="text/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();
  }
</script>

<body>
  <center>
    <form action="#" method="POST" enctype="multipart/form-data" name="myForm">
      <div>

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

JavaScript css html for using Event this border background input
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：SVG パターンを使用して PNG 画像で円を塗りつぶす方法次の記事：SVG パターンを使用して PNG 画像で円を塗りつぶす方法

関連記事

続きを見る