Bootstrapのファイル選択をカッコ良くする

Bootstrap、便利なんですが <input type="file" /> だけなぜかイケてないんですよね。

そこで、比較的簡単によりBootstrapっぽくカッコ良くなる実装をしてみました。

HTML

JS

方針

• 本体そのものをstyle="display:none;"で隠す。
  その代替として、アイコン付きreadonlyテキストボックスをinput-groupで定義。
• アイコンがクリックされたら、hiddenであるファイル選択をクリックしたものとして処理。
• ファイル選択の内容が変更されたら、テキストボックスの内容を連動して書き換える。
  ただし次に挙げる処理により、要素が消されることがあるので、
  イベントの割当は親要素からのフィルタ指定で行う。
• ファイル選択のクリアはval()でのブランク代入はIEで動かないため、
  <input type="file" />要素自体を消して、同じものを追加する処理とする。

補足

テキストボックをクリックしてもファイル選択ダイアログを上げたいって方は

<div class="input-group file-select">

$('.file-select').on('click', function() {
  $('#file_select').click();
});

とかにしておけば良いかなーと思います。