【html】ファイル選択をカスタマイズする

【html】ファイル選択をカスタマイズする

Webサイトでファイルのアップロードを行う際、input要素のファイル選択を使用することが多いと思います。

<input type="file" >

しかし、input要素のファイル選択ではレイアウトや文言を修正することができません。

そこで、CSSとJavaScriptを使用してそれっぽいファイル選択を作成することで解決できます。

HTML、CSS、JavaScriptのソースです。

簡単に書くためにjQueryを使用していますが、もちろんjQueryなしでも実装可能です。

<style>
/* ファイルが選択できそうなボタン */
.selectFileBtn {
  padding: 2px 7px;
  border: solid 1px #666666;
  border-radius: 2px;
  background: linear-gradient(to bottom,
                              #FCFCFC,
                              #FCFCFC 20%,
                              #EEEEEE);
}
.selectFileBtn:hover,
.selectFileBtn:active,
.selectFileBtn:focus {
  border: solid 1px #CCCCFF;
  background: linear-gradient(to bottom,
                              #EEEEEE,
                              #EEEEEE 20%,
                              #FCFCFC);
}
/* ファイル選択ボタンの横にあるラベル */
.selectedFileName {
  margin-left: 5px;
}
</style>

<div>
  <input id="file" type="file" style="display: none;" onchange="changeFile(this);" />
  <label for="file" class="selectFileBtn">ファイルを選択</label>
  <label for="file" class="selectedFileName">ファイルを選択してください。</label>
</div>

<script>
// ファイル選択時にファイル名のラベルを設定する
function changeFile(obj){

    var fileName = '';

    // ファイル名を設定する
    if(obj.files[0] != "undefined"){

        fileName = obj.files[0].name;
    }
    $(obj).parent().find('.selectedFileName').text(fileName);

    return false;
}
</script>

実物はこんな感じです。

似せて作ったのですが、どうでしょうか。

実際のinputのファイル要素は非表示にして、ラベルの見た目をCSSで変更しています。

さらに、見た目が変更されたラベルをクリックするとバブリングによって非表示になっているinput要素へイベントが伝播し、ファイル選択のウィンドウが開きます。

ファイルを選択することによってinput要素のonchangeイベントが発生し、ファイル名を表示しているlabelの内容を変更しています。

label要素なので、「ファイルを選択」の文言も修正することができます。

また、ラベルに画像を設定することで、画像をクリックした際にファイル選択ウィンドウを表示することができるようです。

ただ、古いブラウザでは動かないことがありそうなので、注意が必要です。