IE9でjavascriptからtype="file"を含むFormがsubmitできない

流れ

type="file"で生成されるボタンは見た目がアレなため、自前でボタンを別途設置。

HTML
1<input type="text" id="file-label" disabled /> <!--ファイル名表示用-->
2<button type="button" id="select-btn">ファイル選択</button>
3～(略)～
4<form:form id="frm_up" action="${pageContext.request.contextPath}/up" method="POST" enctype="multipart/form-data">
5  <form:input id="upload-btn" type="file" style="display: none"/>
6～(その他パラメータ)～

自前ボタンにaddEventListenerでupload-btnのclickを呼ぶよう設定。
ファイル選択ボタンクリックでダイアログが表示され、ファイルが選択できます。

そして、最後に送信ボタンをクリックすると$('#frm_up').submit();で送信します。

ここで、送信ボタンを押してみますが、開発ツールのネットワークタブで見てもリクエストが飛んでいきません。
デバッグモードで流れを追っても、確かにsubmit()は呼ばれています。

またさらに不可解なのが、1回送信をクリックしてもPOSTされないのですが、3回クリックすると普通にPOSTされ、サーバでも問題なく受け取れます。

主にお聞きしたいこと

1- 根本的に、type="file"なボタンの見た目が悪いのを回避する策として何か他にベストプラクティスなやり方はあるのでしょうか。もしくは、そんなものはなくデフォルトボタンを使うべきなのでしょうか。

2- 今回の流れに記載した、3回クリックしないと送信されない、という部分は何によってこういった動きになっていると予想されるでしょうか。
今回省略した別の部分のソース？ IEのセキュリティ制約？

環境

共通：Win7、jQuery1.11.1
事象が発生する：IE9
発生しない：IE11、IE11(ie9エミュレート)、Firefox

インターネットオプションのセキュリティレベルは中高⇒中に下げています。(事象変わらず)

どなたか、お知恵をお貸しください。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

opacity=1,position=absolute,left=,top=
てのはどうでしょうか。
定義位置の関係で、<form>の入れ子にさえなっていればポストはちゃんとできます。
それよりも、マウスクリックで file のボタンを押させるのではなくて、ほぼ透明のボタンが
マウスカーソルの位置にセンタリングしていて、結果的にボタンを押したことになる方がいいかも
です。

投稿2016/01/14 17:08