- 流れ
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。