vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

Bootstrapのfileアップロードフォームがダサいから装飾してみた

      2017/01/31

LINEで送る
Pocket

こんにちは、okutani(@okutani_t)です。Bootstrapデフォルトのinput fileはなんだかダサいです。なぜもっとBootstrap感をダサなかったのか……!

ということでBootstrapっぽく変えてみました。プラグインとか何も使わないので、気軽に試せるかと思います。参考にしてください。

スポンサーリンク

Bootstrapのfileフォームを装飾する

まず最初にデフォルトのfileアップロードフォームを確認してみましょう。

下記HTMLコードで確認できます。

<div class="form-group">
  <label for="exampleInputFile">File input</label>
  <input type="file" id="exampleInputFile">
  <p class="help-block">● 〇〇MBまでの画像をアップロードできるよ!</p>
</div>

表示確認

bootstrap-file

ださいです。

次にBootstrapっぽく装飾したフォーム。

<input id="lefile" type="file" style="display:none">
<div class="input-group">
  <input type="text" id="photoCover" class="form-control" placeholder="select file...">
  <span class="input-group-btn"><button type="button" class="btn btn-info" onclick="$('input[id=lefile]').click();">Browse</button></span>
</div>
<p class="help-block">● 〇〇MBまでの画像をアップロードできるよ!</p>

<script>
  $('input[id=lefile]').change(function() {
    $('#photoCover').val($(this).val());
  });
</script>

表示確認

bootstrap-file2

Bootstrap感が出ましたね。

かんたんに解説します。

実際のfileアップロード部分は「display:none」で非表示に。Browseがクリックされた時に、JavaScriptで非表示にしたフォームに値を渡しています。

また、Browseの部分を次のコードに置き換えると、ボタンをアイコンに変更できます。

<span class="glyphicon glyphicon-file" aria-hidden="true"></span>

bootstrap-file3

ファイル添付時、下記のように「C:\fakepath\〜」と出る場合があります。

bootstrap-file4

上記のfakepathの記述を取り除きたい場合、JavaScriptの記述を次のように書き換えてあげればOKです。

  $('input[id=lefile]').change(function() {
    $('#photoCover').val($(this).val().replace("C:\\fakepath\\", ""));
  });

bootstrap-file5

fakepathの記述が取り除かれました。

参考にしてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
ちょっとしたTipsでしたが、Bootstrapでfileアップロードフォームを使う時の参考になれば幸いです。

 - Bootstrap

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

「ClockPicker」を使ってBootstrapでカッコいい時間入力を実装する

こんにちは、okutani(@okutani_t)です。仕事でカッコいい時間入力 …

Bootstrapの導入方法&初期設定まとめ

こんにちは、okutani(@okutani_t)です。みなさんはBootstr …

BootstrapのUIキット「Flat UI」がオシャレでオススメな件

こんにちは、okutani(@okutani_t)です。みなさんBootstra …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。