bootstrap input file

Bootstrapでinput type="file"の見た目をきれいにする

input type="file"
がどのように表示されるか公式サイトを見たら分かると思うけど
他のフォームと比べて違和感がある
http://getbootstrap.com/css/#forms-example

のでこっちみたいにする
http://getbootstrap.com/components/#input-groups-buttons

<div class="input-group">
   <input type="text" class="form-control file-text" placeholder="Image File" readonly>
   <span class="input-group-btn">
     <button class="btn btn-default open-file-dialog" type="button">...</button>
     <input type="file" accept="image/*" class="form-control file" style="display: none;">
   </span>
</div>

$('.open-file-dialog').on('click', function() {
  $(this).next('input[type="file"]').trigger('click');
});

$('.file').change(function() {
  $(this).closest('.form-group').find('.file-text').val($(this).val());
});

input type="file"の要素を非表示にして、ボタンが押されたらclickイベントを起動する
ファイルが変更されたらテキスト領域にファイル名を表示させる