4

ネイティブのボタン置換にjQueryMobile1.7.1を使用するinput type="file"。

コードは機能しますが、ファイルの参照/オープンビットで2番目の要求を強制します。

私は何が欠けていますか？

ChromeとFFで同じ動作（他の場所では試していません）。

<div id="fileInputButton"  data-role="button" data-icon="gear" style="width:150px;margin:0 auto; text-align:center">Import</div>

<div id="filename"></div>

<input style="opacity:0;" id="the_real_file_input" name="foobar" type="file">

 <script>
  $('#fileInputButton').click(function() {
    $('#the_real_file_input').click();
  });

  $('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
  }).change();
 </script>

ご協力いただきありがとうございます！

更新： JQuery Mobileが適用されるまで、このフィドルhttp://jsfiddle.net/pg3Qf/で正常に機能します。（@wireyに感謝します！）

最終更新：これにより、ダブルトリガーの問題が修正されます。

$('#fileInputButton').click(function(e) {
     e.stopImmediatePropagation();
     $('#the_real_file_input').click();
 });

そして、これはChromeとSafariの「C：\fakepath\」の問題を修正します。

str = $(this).val().replace(/C:\\fakepath\\/i, '');
4

1 に答える 1

8

理由はわかりませんが、stopImmediatePropagationを使用すると、2回のトリガーが停止します。イベントが何かに泡立っているようには見えません

$('#fileInputButton').click(function(e) {
     e.stopImmediatePropagation();
     console.log('triggered');
     $('#the_real_file_input').click();
 });

http://jsfiddle.net/pg3Qf/3/

于 2012-07-30T18:49:20.600 に答える