5

ファイル コントロールと、そのファイル フィールドでクリック イベントを発生させる別のボタンを備えたフォームがあります。問題は、ボタンをクリックすると、ページの下部にある送信ボタンを IE で 2 回クリックする必要があることです。どうすればそれを防ぐことができますか?

最も単純な形式では、コードは次のとおりです。

HTML:

<form action="#">
  <input type="file" id="myFile" />
  <button id="myButton">** My Choose **</button>
  <input type="submit" value="Submit" />
</form>

JavaScript:

$(function() {
    $('#myButton').click(function(e) {
        e.preventDefault();
        $('#myFile').click();
    });
});

JSFiddle のより詳細なサンプル: http://jsfiddle.net/XPqQB/6/

IE では、[My Choose] ボタンをクリックすると、実際に投稿するには [Submit] を 2 回クリックする必要があります。(通常、「myFile」は非表示になりますが、デモ用に表示したままにしています。)

テスト手順:

  • ケース 1:
    1. ページの更新。
    2. 「送信」をクリックします。送信を確認します (開発ツール経由)。
  • ケース 2:
    1. ページの更新。
    2. ファイル入力の横にある「参照...」をクリックし、ファイルを選択します。
    3. 「送信」をクリックします。送信を確認します (開発ツール経由)。 (場合によっては、これでも 2 回クリックする必要があります!)
  • ケース 3:
    1. ページの更新。
    2. 「My Choose」をクリックして、ファイルを選択します。
    3. 「送信」をクリックします。何もしない。

ケース 2 と 3 では、.click() または .submit() イベントもトリガーされない場合があることもわかります。

これのさらに興味深い側面は、ページに複数のファイル入力がある場合です。3 つある場合、上記を 3 回実行すると、送信ボタンを合計 4 回クリックしてページを送信する必要があります。

4

1 に答える 1

1

解決策は、ファイル入力を指すラベルを使用することです。ラベルに任意のスタイルを適用でき、機能します

<label for="myFile">** My Label **</label><br/>
<input type="file" id="myFile" name="myFile" />

私が理解しているように、IE9のセキュリティ制限が原因です

于 2013-11-07T22:19:28.393 に答える