jquery - 非表示のファイル入力要素が JavaScript で機能しない

Question

次のようなコード（簡略化）で非表示の要素の例を使用して、ブートストラップで見栄えの良いファイル入力フォーム要素を取得しようとしています。

<div class="container">
  <form enctype="multipart/form-data" action="">
    <input class="hide" id="filesel" type="file" />
    <div class="input-append">
      <input id="filename" class="input-large" type="text" />
      <a class="btn" onclick="testFun();">Browse</a>
    </div>
  </form>
</div>

<script type="text/javascript">
  $('input[id=filesel]').change(function() {
  $('#filename').val($(this).val());
  });

  function testFun(){
  inp = $("#filesel").click();
  }
</script>

しかし、期待どおりには機能しません。hideファイル入力タグのクラスを削除すると、機能します。どうすれば解決できますか？

更新 1:より多くのナビゲーターでテスト済み:

• Ubuntu Chromium 18.0 -> 失敗
• Ubuntu Firefox 16.0 -> 動作します

My in Chromiumhideまたはstyle="display: none"は、ファイル参照ウィンドウにも影響します。