input[type=”file”]の見た目を変更して選択ファイル名の表示やクリアにも対応させる方法

input[type=”file”]の見た目を変更して選択ファイル名の表示やクリアにも対応させる方法

input[type=”file”]の見た目を変更して選択ファイル名の表示やクリアにも対応させる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

フォームでファイルを選択して送信できるようにするためには、以下のようなinput[type=”file”]を使うと思います。

<input type="file" name="file">

このinput要素、デフォルトの見た目がイケてないですよね。Chromeで開いた場合こんな感じです。

デフォルトのinput type file

input[type=”file”]の見た目を変更しようと思った場合、単純にinput要素にCSSを指定してもうまく変わらず、若干クセがあります。

今回は、input[type=”file”]の見た目を変更する方法と選択したファイル名を表示したり、選択したファイルをクリアする方法をご紹介したいと思います。

スポンサードリンク

input[type=”file”]の見た目を変更する方法

まずは見た目を変更していきます。HTMLは以下のようにlabelで囲み、ファイル名を表示するための要素も追加します。

<label>
  <input type="file" name="file" class="js-upload-file">ファイルを選択
</label>
<div class="js-upload-filename">ファイルが未選択です</div>
<div class="fileclear js-upload-fileclear">選択ファイルをクリア</div>

※.js-upload-file/.js-upload-filename/js-upload-fileclearというクラス名は、後ほどJavaScriptで使用します。

何もスタイルが当たっていない状態だと、こんな感じです↓

CSSでは、input要素を非表示にして、labelに対してスタイルを指定します。クリアボタンは一旦非表示にしておきます。

input[type="file"] {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

label {
  padding: 10px 25px;
  margin: 0 0 10px;
  background: #aaa;
  color: #fff;
  display: inline-block;
  cursor: pointer;
}

.fileclear {
  display: none;
  margin: 10px 0 0;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

labelの見た目については、サイトに合わせて適宜変更してください。スタイルを適用すると以下のようになります。

input type fileの見た目調整

このままだと、ファイルを選択しても「ファイルが未選択です」の部分が変わらないので、次はファイル名を表示するための調整を行います。

input[type=”file”]で選択したファイル名を表示させる方法

選択したファイル名を「ファイルが未選択です」の部分に表示するには、以下のjQueryを追加します。jQuery本体をすでにロード済みの場合は、1行目は不要です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
  $('.js-upload-file').on('change', function () { //ファイルが選択されたら
    var file = $(this).prop('files')[0]; //ファイルの情報を代入(file.name=ファイル名/file.size=ファイルサイズ/file.type=ファイルタイプ)
    $('.js-upload-filename').text(file.name); //ファイル名を出力
  });
});
</script>

上記を</body>の直前に追加することで、ファイルを選択した時にファイル名が表示されるようになります。

選択ファイル名の表示

input[type=”file”]で選択したファイルをクリアする方法

選択したファイルをクリア(削除)したい場合は、上述したjQueryに少し追記します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
  $('.js-upload-file').on('change', function () { //ファイルが選択されたら
    let file = $(this).prop('files')[0]; //ファイルの情報を代入(file.name=ファイル名/file.size=ファイルサイズ/file.type=ファイルタイプ)
    $('.js-upload-filename').text(file.name); //ファイル名を出力
    $('.js-upload-fileclear').show(); //クリアボタンを表示
  });
  $('.js-upload-fileclear').click(function() { //クリアボタンがクリックされたら
    $('.js-upload-file').val(''); //inputをリセット
    $('.js-upload-filename').text('ファイルが未選択です'); //ファイル名をリセット
    $(this).hide(); //クリアボタンを非表示
  });
});
</script>

ファイルが選択されたら、「$(‘.js-upload-fileclear’).show();」でクリアボタンを表示します。

クリアボタンの表示

クリアボタンがクリックされたら、「$(‘.js-upload-file’).val(”);」で選択ファイルをクリアし、「$(‘.js-upload-filename’).text(‘ファイルが未選択です’);」でファイル名表示部分をリセットします。

最後に「$(this).hide();」でクリアボタンを非表示に戻して完了です。

あとがき

input[type=”file”]の見た目や挙動を変更したい時は、ぜひ参考にしていただけると幸いです。

ちなみに、上記の方法だとIE10以下ではファイルのクリアが効かないみたいなのですが、さすがにIE10以下に対応するケースは少ないと思いますのでこれで良しとします。(IE11ではちゃんと動作します)

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。