फ़ाइल इनपुट लेबल क्लिक करने के लिए वर्कअराउंड (फ़ायरफ़ॉक्स)

Question

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

फ़ायरफ़ॉक्स में लेबल पर क्लिक करके खुले फ़ाइल संवाद को ट्रिगर करना संभव नहीं है।

This SO question बहुत समान है लेकिन यह के साथ हरा चेक किया गया है यह एफएफ में एक बग है। मैं एक कामकाज की तलाश में हूँ।

कोई भी विचार?

Answer 1

इस q & के लिए धन्यवाद ... मेरी मदद की।

@ नेवला-विक्स्ट्रोम के समाधान की मेरी भिन्नता:

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

नोटों

• ($(function() {...});) document.ready का उपयोग कर या तो समाधान में अनावश्यक है,। jQuery.fn.live उस पर @ मार्टिन-विक्रस्ट्रॉम के मामले में ख्याल रखता है; मेरे उदाहरण में स्पष्ट रूप से बाध्यकारी document है।
• jQuery.fn.on का उपयोग कर ... वर्तमान अनुशंसित बाध्यकारी तकनीक।

• निष्पादन सुनिश्चित करने के लिए !== 'INPUT' जांच जोड़ा एक पाश यहाँ में फंस जाते हैं नहीं करता है:

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

  (के बाद से फ़ाइल क्षेत्र क्लिक करेंगे बुलबुला वापस लेबल तक)

• परिवर्तन event.target जांच करने के लिए event.currentTarget, <em> में पर हुई आरंभिक क्लिक के लिए अनुमति: लेबल का उपयोग कर

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

• तत्व की control क्लीनर, सरल, spec-base form फ़ील्ड एसोसिएशन के लिए विशेषता।

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

काफी अजीब एफएफ आप एक फ़ाइल इनपुट पर एक क्लिक के अनुकरण करने के लिए अनुमति देता है। मैंने सोचा था कि एक सुरक्षा जोखिम माना जाता था ...

अद्यतन: यह एक सामान्य समाधान नहीं है:

<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

लेबल और इनपुट तत्वों का क्रम उल्टा। iow, इनपुट तत्व के बाद लेबल तत्व डालें।

Answer 4

jQuery ब्राउज़र पहचान का उपयोग करते समय कुछ समस्याएं उत्पन्न होती हैं, विशेष रूप से विशेषता का पता लगाने के बजाय ब्राउज़र पहचान का उपयोग करने के विरोधी पैटर्न, 1.9+ उस कार्यक्षमता को प्रदान नहीं करता है।

शायद, मैं जिस समाधान पर पहुंचा, वह थोड़ा पाखंडी है, लेकिन यह अच्छी तरह से काम करता है और आज के सबसे अच्छे प्रथाओं का पालन करता है।

सबसे पहले, सुनिश्चित करें कि आप Paul Irish's conditional classes का उपयोग कर रहे हैं।फिर, कुछ का उपयोग करें:

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

अन्यथा, मुझे पता चला कि कार्यक्रम क्रोम जैसे ब्राउज़र में डबल-फायर किया जाएगा। यह समाधान काफी सुरुचिपूर्ण लग रहा था।

Answer 5

फ़ाइल चयन चयन click() event द्वारा सभी ब्राउज़रों में ट्रिगर किया जा सकता है। इस समस्या का एक विनीत समाधान है कि दिखाई देगा:

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

for विशेषता निकाला जा रहा है महत्वपूर्ण है क्योंकि अन्य ब्राउज़रों (जैसे क्रोम, आईई) अभी भी यह स्वीकार करने और संवाद दो बार दिखाई देगा।

मैंने इसे क्रोम 25, फ़ायरफ़ॉक्स 1 9 और आईई 9 में परीक्षण किया और एक आकर्षण की तरह काम करता है।

Answer 6

यह एफएफ 23 में तय किया जा रहा है, तो ब्राउज़र का पता लगाने खतरनाक हो जाता है और डबल प्रणाली संवाद की ओर जाता है, (

आप संस्करण 23 से पहले एक और परीक्षण में जोड़ सकते हैं एफएफ संस्करण के लिए ठीक प्रतिबंधित करने के लिए:

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

यह काफी बदसूरत है, लेकिन यह सुधार जैसे ही पुराना है जितना एफएफ के संस्करण गायब हो गए हैं जाएगा निकाल दिया जाएगा।

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

क्या आप इनपुट प्रदर्शन करना चाहते हैं, तो 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