文件输入标签单击（Firefox）的解决方法

Question

<label for="input">Label</label><input type="file" id="input"/> 

在Firefox 7中，无法通过单击标签触发打开的文件对话框。

This SO question非常相似，但这是绿色检查与这是FF中的错误。我正在寻找解决方法。

任何想法？

Answer 1

谢谢你这个q & a ...帮了我。

我@貂，wikstrom解决方案的变化：使用的document.ready（$(function() {...});）

if($.browser.mozilla) { 
    $(document).on('click', 'label', function(e) { 
    if(e.currentTarget === this && e.target.nodeName !== 'INPUT') { 
     $(this.control).click(); 
    } 
    }); 
} 

笔记

• 是不必要的，在任何解决方案。 jQuery.fn.live负责@ marten-wikstrom的案例;明确地绑定到document确实在我的例子中。
• 使用jQuery.fn.on ...目前推荐的绑定技术。

• 添加!== 'INPUT'检查，以确保执行不陷入一个循环的位置：

  <label> 
      <input type="file"> 
  </label> 
  

  （因为文件字段中，单击将泡沫备份到标签）

• 变化event.target检查event.currentTarget，允许初始点击<em>在：使用标签

  <label for="field">click <em>here</em></label> 
  

• 元素的control属性，以获得更简洁，规范的表单字段关联。

Answer 2

我想出了一个可行的解决方法：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("label").click(function() { 
      $("#input").click(); 
     }); 
    }); 
</script> 
<label for="input">Label</label><input type="file" id="input"/> 

很奇怪的是，FF可以模拟上的文件输入一个点击。我认为这被认为是一个安全隐患...

UPDATE：这是一个通用的解决方法：

<script type="text/javascript"> 
    $(function() { 
     if ($.browser.mozilla) { 
      $("label").live("click", function (event) { 
       if (event.target == this) { 
        $("#" + $(this).attr("for")).extend($("input", this)).first().click(); 
       } 
      }); 
     } 
    }); 
</script> 

Answer 3

反向标签和输入元素的顺序。嗨，把标签元素放在输入元素之后。

Answer 4

使用jQuery浏览器检测时出现了一些问题，特别是使用浏览器检测而不是功能检测的反模式，此外1.9+不提供该功能。

也许，那么我得出的解决方案有点虚伪，但它运行良好，似乎坚持今天的大多数最佳实践。

首先，确保您使用的是Paul Irish's conditional classes。然后，使用类似的东西：

if($("html").hasClass("ie")) { 
    $("label").click(); 
    } else { 
    $("input").click(); 
    } 

否则，我发现该事件将在Chrome等浏览器中被双击。这个解决方案看起来很优雅

Answer 5

文件选择对话框可以在所有浏览器中由click() event触发。一个不显眼的解决了这个问题看起来是这样认为：因为其他浏览器（例如Chrome浏览器，IE浏览器）仍然会批准，并显示对话框两次

$('label') 
    .attr('for', null) 
    .click(function() { 
     $('#input').click(); 
    }); 

卸下for属性是很重要的。

我在Chrome 25，Firefox 19和IE 9中测试过它，并且像魅力一样工作。

Answer 6

这似乎是固定的FF 23，所以浏览器检测变得危险，并导致双系统对话框;（

您可以版本23之前添加其他测试，以限制固定到FF版本：

if(parseInt(navigator.buildID,10) < 20130714000000){ 
    //DO THE FIX 
} 

这是相当难看，但这个修复会尽快老FF的版本将会消失删除。

Answer 7

试试这个代码

<img id="uploadPreview" style="width: 100px; height: 100px;" 
onclick="document.getElementById('uploadImage').click(event);" /> 
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> 
<script type="text/javascript"> 
    function PreviewImage() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 
     oFReader.onload = function (oFREvent) { 
      document.getElementById("uploadPreview").src = oFREvent.target.result; 
     }; 
    }; 
</script> 

Answer 8

如果您希望 使输入显示：none和visibility：hidden，然后从图像的点击触发，然后分派事件，您可以将事件从任何事件发送到type =文件输入。 ..

<img id="customImg" src="file.ext"/> 
<input id="fileLoader" type="file" style="display:none;visibility:hidden"/> 

<script> 
    customImg.addEventListener(customImg.ontouchstart?'touchstart':'click', function(e){ 
     var evt = document.createEvent('HTMLEvents'); 
     evt.initEvent('click',false,true); 
     fileLoader.dispatchEvent(evt); 
    },false); 
</script> 

Answer 9

一个解决时，你不需要/希望有输入框（如图片上传）是元素中使用opacity: 0并在标签中使用pointer-events: none;。 该解决方案实际上是专门设计的，但也许应该为某人来解决这个问题。 （到现在为止的错误不会被固定）

http://codepen.io/octavioamu/pen/ByOQBE