文件輸入標籤單擊（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