Question

使用jQuery Mobile 1.7.1替换原生input type="file"。

代码有效，但强制在浏览/打开文件位上发出第二个请求。

我错过了什么？

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>

感谢您的帮助！

更新：在这个小提琴http://jsfiddle.net/pg3Qf/中正常工作，直到应用JQuery Mobile。（谢谢@wirey！）

最终更新：这解决了双触发问题：

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

而且，这修复了Chrome和Safari中的“C：\ fakepath”问题：

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

Answer 1

我不知道为什么但是使用stopImmediatePropagation会阻止它触发两次。它似乎不会冒泡到任何事情

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

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

替换文件输入类型=“文件”按钮的功能有效，但要求文件两次

1 个答案: