दिलचस्प पोस्ट
जीमेल एसएमटीपी सर्वर के माध्यम से सी # के साथ ईमेल भेजा जा रहा है `1 एल` और` 1` के बीच अंतर क्या है? जावा में संकुल के साथ मदद – आयात काम नहीं करता एमुलेटर में Google Play सेवाएं, Google Plus लॉग इन बटन आदि को कार्यान्वित करना फ़ंक्शन का प्रयोग करके दो तिथियों के बीच की तारीखों की एक सूची प्राप्त करें ओएसजीआई क्या हल करता है? कोणीय 2 (बीटा) में एक सेवा को इंजेक्शन करने का सबसे अच्छा तरीका क्या है? स्लैला लैम्ब्डा फ़ंक्शन में _ का उपयोग विभिन्न JUnit परीक्षणों के लिए अलग-अलग classloaders का उपयोग करना? क्या कोई स्ट्रीमर अपने बेसस्ट्रीम बंद किए बिना बंद करने का कोई तरीका है? किसी गतिविधि से बाहर निकलने के लिए दो बार वापस बटन पर क्लिक करना java.lang.noclassdeffounderror: com.google.android.gms.R $ शैलीबल मुझे आत्म = क्यों कॉल करनी चाहिए स्ट्रिंग सरणी में मान मिलान करना # कैसे <bits / stdc ++। H> को शामिल करता है> सी ++ में काम करता है?

Jquery ट्रिगर फ़ाइल इनपुट

JQuery का उपयोग कर एक अपलोड बॉक्स (ब्राउज़ बटन) ट्रिगर करने का प्रयास कर रहा है
जिस पद्धति मैंने आज कोशिश की है वह है:

$('#fileinput').trigger('click'); 

लेकिन यह काम करने के लिए प्रतीत नहीं होता कृपया मदद करे। धन्यवाद।

वेब के समाधान से एकत्रित समाधान "Jquery ट्रिगर फ़ाइल इनपुट"

यह सुरक्षा प्रतिबंध के कारण है

मुझे पता चला कि सुरक्षा प्रतिबंध तब ही है जब <input type="file"/> को display:none; करने के लिए सेट किया गया display:none; या visbilty:hidden

इसलिए मैंने स्थिति को सेट करके व्यूपोर्ट के बाहर स्थिति निर्धारण की कोशिश की position:absolute और top:-100px; और वॉयला यह काम करता है।

देखें http://jsfiddle.net/DSARd/1/

इसे एक हैक कहते हैं

उम्मीद है वह आप के काम आएगा।

यह मेरे लिए काम किया:

जे एस:

 $('#fileinput').trigger('click'); 

HTML:

 <div class="hiddenfile"> <input name="upload" type="file" id="fileinput"/> </div> 

सीएसएस:

 .hiddenfile { width: 0px; height: 0px; overflow: hidden; } 

>>> क्रॉस-ब्राउज़र: <<< काम करता है

आइडिया यह है कि आप अपने कस्टम बटन पर एक अदृश्य विशाल "ब्राउज" बटन को ओवरले करते हैं इसलिए जब उपयोगकर्ता आपके कस्टम बटन को क्लिक करता है, तो वह वास्तव में देशी इनपुट फ़ील्ड के "ब्राउज" बटन पर क्लिक कर रहा है।

जेएस फ्रेडल: http://jsfiddle.net/5Rh7b/

HTML:

 <div id="mybutton"> <input type="file" id="myfile" name="upload"/> Click Me! </div> 

सीएसएस:

 div#mybutton { /* IMPORTANT STUFF */ overflow: hidden; position: relative; /* SOME STYLING */ width: 50px; height: 28px; border: 1px solid green; font-weight: bold background: red; } div#mybutton:hover { background: green; } input#myfile { height: 30px; cursor: pointer; position: absolute; top: 0px; right: 0px; font-size: 100px; z-index: 2; opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=0); /* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -khtml-opacity: 0.0; /* Safari 1.x */ -moz-opacity: 0.0; /* FF lt 1.5, Netscape */ } 

जावास्क्रिप्ट:

 $(document).ready(function() { $('#myfile').change(function(evt) { alert($(this).val()); }); }); 

आप LABEL तत्व EX का उपयोग कर सकते हैं

 <div> <label for="browse">Click Me</label> <input type="file" id="browse" name="browse" style="display: none">// </div> 

यह इनपुट फ़ाइल ट्रिगर करेगा

मैं इसे IE8 + (+ परीक्षण) में काम कर रहा हूं, हाल में एफएफ और क्रोम:

 $('#uploadInput').focus().trigger('click'); 

कुंजी क्लिक को फ़ायरिंग करने से पहले ध्यान केंद्रित कर रहा है (अन्यथा क्रोम इसे अनदेखा करता है)

नोट: आपको अपने इनपुट प्रदर्शित और दृश्यमान होने की ज़रूरत है (जैसा कि display:none नहीं display:none और visibility:hidden नहीं visibility:hidden )। मैं सुझाव देता हूं कि (जैसा कि पहले बहुत से पहले है) पूरी तरह से इनपुट की स्थिति और इसे स्क्रीन से फेंकने के लिए।

 #uploadInput { position: absolute; left: -9999px; } 

मेरे बेला की जाँच करें

http://jsfiddle.net/mohany2712/vaw8k/

 .uploadFile { visibility : hidden; } #uploadIcon {cursor: pointer; } 
 <body> <div class="uploadBox"> <label for="uploadFile" id="uploadIcon"> <img src="http://img.hiwab.com/javascript/512px-Icon_-_upload_photo_2.svg.png" width="20px" height="20px"/> </label> <input type="file" value="upload" id="uploadFile" class="uploadFile" /> </div> </body> 

एडारडेसिन ने इसे फ़ाइल इंप्लेट तत्व के बारे में खारिज कर दिया जब इसे छुपा हुआ है मैंने भी कई लोगों को तत्व के आकार को 0 में स्थानांतरित करने, या स्थिति और अतिप्रवाह समायोजन के साथ सीमा के बाहर धकेलने पर भी गौर किया। ये सभी महान विचार हैं
एक वैकल्पिक तरीका जो बिल्कुल अच्छी तरह से काम करने लगता है, बस 0 से अपारदर्शिता सेट करना है । फिर आप हमेशा इसे अन्य तत्वों को ऑफसेट करने से रखने के लिए स्थिति को सेट कर सकते हैं जैसे छिपाना ऐसा लगता है कि किसी भी दिशा में लगभग 10K पिक्सेल तत्व को स्थानांतरित करने के लिए कुछ अनावश्यक लगता है।

उन लोगों के लिए यहां थोड़ा उदाहरण है, जो एक चाहते हैं:

 input[type='file']{ position:absolute; opacity:0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */ filter: alpha(opacity=0); } 

सही कोड:

 <style> .upload input[type='file']{ position: absolute; float: left; opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */ filter: alpha(opacity=0); width: 100px; height: 30px; z-index: 51 } .upload input[type='button']{ width: 100px; height: 30px; z-index: 50; } .upload input[type='submit']{ display: none; } .upload{ width: 100px; height: 30px } </style> <div class="upload"> <input type='file' ID="flArquivo" onchange="upload();" /> <input type="button" value="Selecionar" onchange="open();" /> <input type='submit' ID="btnEnviarImagem" /> </div> <script type="text/javascript"> function open() { $('#flArquivo').click(); } function upload() { $('#btnEnviarImagem').click(); } </script> 

यह उद्देश्य और डिजाइन पर है यह एक सुरक्षा समस्या है

मैं एक साधारण $ (…) के साथ प्रबंधित किया। क्लिक करें (); JQuery 1.6.1 के साथ

या फिर बस

 $(':input[type="file"]').show().click().hide(); 

जवाब देने में बहुत देर हो चुकी है लेकिन मुझे लगता है कि यह न्यूनतम सेटअप सबसे अच्छा काम करता है। मैं भी उसी के लिए देख रहा हूं।

  <div class="btn-file"> <input type="file" class="hidden-input"> Select your new picture </div> 

// सीएसएस

 .btn-file { display: inline-block; padding: 8px 12px; cursor: pointer; background: #89f; color: #345; position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; filter: alpha(opacity=0); opacity: 0; cursor: inherit; display: block; } 

jsbin

बूटस्ट्रैप फ़ाइल इनपुट बटन डेमो

बस जिज्ञासा की खातिर, आप ऐसा कुछ कर सकते हैं जैसे आप गतिशील रूप से एक अपलोड फ़ॉर्म और इनपुट फ़ाइल बनाकर डॉम ट्री को जोड़ते हैं। उदाहरण:

 $('.your-button').on('click', function() { var uploadForm = document.createElement('form'); var fileInput = uploadForm.appendChild(document.createElement('input')); fileInput.type = 'file'; fileInput.name = 'images'; fileInput.multiple = true; fileInput.click(); }); 

DOM को अपलोडफॉर्म जोड़ने की आवश्यकता नहीं है।

दरअसल, मुझे इसके लिए एक बहुत ही आसान विधि मिली, जो है:

 $('#fileinput').show().trigger('click').hide(); 

इस तरह, आपकी फ़ाइल इनपुट फ़ील्ड में सीएसएस संपत्ति का प्रदर्शन किसी पर नहीं हो सकता है और अभी भी व्यापार जीत सकता है 🙂

यह एक बहुत पुराना सवाल है, लेकिन दुर्भाग्य से यह समस्या अभी भी प्रासंगिक है और समाधान की आवश्यकता है।

मैं (आश्चर्यजनक रूप से सरल) समाधान के साथ आया हूं, वह वास्तविक फ़ाइल इनपुट फ़ील्ड को छिपाने के लिए है और यह एक लेबल टैग के साथ लपेटता है (बूटस्ट्रैप और एचटीएमएल 5 पर आधारित वृद्धि के लिए)।

See here: उदाहरण कोड यहाँ

इस तरह, वास्तविक फ़ाइल इनपुट फ़ील्ड अदृश्य है और आप जो भी देखते हैं वह वही अनुकूलित "बटन" है जो वास्तव में एक संशोधित LABEL तत्व है जब आप इस LABEL तत्व पर क्लिक करते हैं, तो एक फ़ाइल चुनने के लिए विंडो ऊपर आती है और आप जो फ़ाइल चुनते हैं, वह वास्तविक फ़ाइल इनपुट फ़ील्ड में जाएगी।

उस के ऊपर, आप अपनी पसंद और व्यवहार को हेरफेर कर सकते हैं (उदाहरण के लिए: चयनित फ़ाइल के नाम से चयनित फ़ाइल का नाम, चयनित के बाद प्राप्त करें, और उसे कहीं दिखाएं।) LABEL तत्व स्वत: ही नहीं करता, ज़ाहिर है। मैं आमतौर पर इसे केवल LABEL के अंदर रखता हूं, इसकी पाठ सामग्री के रूप में)।

हालांकि सावधान! इस के देखो और व्यवहार का हेरफेर जो कुछ भी आप सोच और सोच सकते हैं, उससे सीमित है। 😉 😉

यह कोशिश करो, यह एक हैक है। स्थिति: पूर्ण क्रोम के लिए है और ट्रिगर ('परिवर्तन') IE के लिए है।

 var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />"); $('body').append(hiddenFile); $('#aPhotoUpload').click(function () { hiddenFile.trigger('click'); if ($.browser.msie) hiddenFile.trigger('change'); }); hiddenFile.change(function (e) { alert('TODO'); }); 

मेरी समस्या आईओएस 7 पर थोड़ा अलग थी। फास्टक्लिक के बाहर निकलते हुए समस्याएं पैदा हो रही थीं। मुझे बस इतना करना था class="needsclick" मेरे बटन को जोड़ने के लिए।

यह संभवतः सबसे अच्छा जवाब है, क्रॉस ब्राउज़र मुद्दों को ध्यान में रखते हुए

सीएसएस:

 #file { opacity: 0; width: 1px; height: 1px; } 

जे एस:

 $(".file-upload").on('click',function(){ $("[name='file']").click(); }); 

HTML:

 <a class="file-upload">Upload</a> <input type="file" name="file"> 

मुझे ट्रिगर करने के लिए एक नकली बटन का उपयोग करते समय <input type="file"/> कस्टम क्लाइंट साइड सत्यापन के साथ समस्याएं थीं और @गुइलाउम बोडी के समाधान ने मेरे लिए काम किया ( opacity: 0; साथ opacity: 0; क्रोम पर)

 $("#MyForm").on("click", "#fake-button", function () { $("#uploadInput").focus().trigger("click"); }); 

और अपलोड इनपुट के लिए सीएसएस शैली

 #uploadInput { opacity: 0.0; filter: alpha(opacity=0); /* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -khtml-opacity: 0.0; /* Safari 1.x */ -moz-opacity: 0.0; } 

Guillaume Bodi के जवाब के आधार पर मैंने यह किया:

 $('.fileinputbar-button').on('click', function() { $('article.project_files > header, article.upload').show(); $('article.project_files > header, article.upload header').addClass('active'); $('.file_content, article.upload .content').show(); $('.fileinput-button input').focus().click(); $('.fileinput-button').hide(); }); 

जिसका अर्थ है कि इसे शुरू करने के लिए छुपी हुई है और फिर ट्रिगर के लिए प्रदर्शित किया जाता है, फिर तुरंत फिर से छिपी