文件输入标签单击的解决方法 (Firefox)

Question

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

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

这个问题非常相似，但它是绿色的，这是一个FF 中的错误。我正在寻找解决方法。

有什么想法吗？

Answer 1

谢谢你的问答...帮助了我。

我对 @marten-wikstrom 解决方案的变体：

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

在任一解决方案中，使用 document.ready ($(function() {...});)的注释

• 都是不必要的。 jQuery.fn.live 负责处理 @marten-wikstrom 的情况；在我的示例中，显式绑定到 document 是这样。
• 使用 jQuery.fn.on...当前推荐的绑定技术。

• 添加了 !== 'INPUT' 检查以确保执行不会陷入循环：

  <前><代码><标签>
  <输入类型=“文件”>
  

  （因为文件字段单击将冒泡回到标签）

• 将event.target检查更改为event.currentTarget，允许初始单击< ;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 允许您模拟文件输入上的点击。我认为这被认为是安全风险...

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

<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

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

也许，我得出的解决方案有点虚伪，但它运作良好，并且似乎遵循了当今的大多数最佳实践。

首先，确保您使用 Paul Irish 的条件类。然后，使用类似：

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

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

Answer 4

文件选择对话框可以通过 click() 事件。此问题的一个不显眼的解决方案可能如下所示：

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

删除 for 属性很重要，因为其他浏览器（例如 Chrome、IE）仍然会批准它并显示对话框两次。

我在 Chrome 25、Firefox 19 和 IE 9 中测试了它，效果非常好。

Answer 5

它似乎在 FF 23 中得到了修复，因此浏览器检测变得危险并导致双系统对话框;(

您可以添加另一个测试来限制对版本 23 之前的 FF 版本的修复：

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

它非常丑陋，但此修复将被删除，因为一旦旧版本的FF就会消失。

Answer 6

当您不需要/不想有输入框（例如图像上传）时，解决方法是在元素中使用 opacity: 0 并使用 pointer-events: none;代码> 在标签中。
该解决方案确实是特定于设计的，但也许应该适用于遇到此问题的人。 （到目前为止，该错误尚未修复）

http://codepen.io/octavioamu/pen/ByOQBE< /a>

Answer 7

颠倒标签和输入元素的顺序。 iow，将标签元素放在输入元素之后。

Answer 8

如果需要，您可以将任何事件中的事件分派到 type=file 输入
使输入显示：无和可见性：隐藏，然后从以下位置调度事件：
比如说，点击|触摸图像......

<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

在 React 环境中使用上面 Corey 的答案，我必须执行以下操作：

（Firefox 检查基于：如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器？)

const ReactFileInputButton = ({ onClick }) => {

    const isFirefox = typeof InstallTrigger !== 'undefined';

    const handleClick = isFirefox ? (e) => {
        e.currentTarget.control.click();
    } : undefined;

    const handleFileSelect = (e) => {
        if (e.target.files && e.target.files[0]) {
            onClick({ file: e.target.files[0] });
        }
    }

    return (
        <>
            <input type="file" id="file" onChange={handleFileSelect} />
            <label htmlFor="file" onClick={handleClick}>
                Select file
            </label>
        </>
    );
};

Answer 10

试试这个代码

<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>