Bootstrapでファイルアップロード

Twitter Bootstrap3.0(TB3.0)の登場で、作っていたWebミニプログラムであるお知らせ更新プログラムをバージョンアップさせてみました。
ファイルのアップロードをAjaxにしてみたり、アップロードファイル数も自由に変更できるようにしてみたり、設定画面で変更できる項目を整理したりしました。
まぁ、このプログラムは公開していないので、説明してもアレなのですが・・・w

そんなこんなでTB3.0を色々触っていて思ったのですが、以前ファイルアップロードの見た目をTBっぽくするTipsみたいなのをご紹介していたのですが、実はこれがIEでは動かないことがありました・・・orz
(紹介していたときはIEでも動作確認したと思ったんだけどなぁ・・・)

そこで、TBを使ってもっと見た目を良くできないか、しかもクロスブラウザ対応にできないかと色々水面下で考えていたのですが、ふとTB3.0のサイトでGlyphiconsを眺めていてちょっとしたひらめきをしました。

TBの「input-group」と「glyphicons」を使うだけで、それっぽくみえるんじゃね?

ということで、

<div class="input-group">
	<span class="input-group-addon"><i class="glyphicon glyphicon-paperclip"></span></i>
	<input type="file" name="photo" id="photo" class="form-control">
</div>

これだけで、ちょっとオサレなんじゃないの?
ちょっと各ブラウザで確認。

Google ChromeのデザインWin版 Google Chrome 29

IE10のデザインWin版 Internet Explorer 10

FireFoxのデザインWin版 FireFox 24

OPERAのデザインWin版 Opera 12

SafariのデザインWin版 Safari 5

おぉ、Safariだけ残念な見え方だけど、それ以外はなんとなくそれっぽく見えてるじゃん!!
個人的にはIEの見え方が一番好きだけど、とりあえず、これで良しとするか!

でも、GlyphiconsなのになぜSafariではクリップマークが見えないのだろう・・・

と思ったら、TB公式サイトに

Safari (Mac and iOS only, as Windows has more or less been discontinued)
(サファリはMacとiOSだけだよ。だって、Windows版は更新とまってんじゃん)的な・・・

と書いてありました。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

投稿ナビゲーション