इनपुट पर क्लिक() का उपयोग करने में समस्या [प्रकार = फ़ाइल]

मुझे click() फ़ंक्शनटन में कोई समस्या है। यह ओपेरा में काम नहीं करता है।इनपुट पर क्लिक() का उपयोग करने में समस्या [प्रकार = फ़ाइल]

मैं input type=file बनाने की कोशिश कर रहा हूं onclick किसी अन्य तत्व की घटना पर क्लिक किया गया। मुझे अपने इनपुट type=file तत्व को स्टाइल करने की ज़रूरत है, इसलिए मैंने इसे अदृश्य बना दिया और इसे सरल स्टाइल बटन से बदल दिया। अब जब बटन क्लिक किया जाता है तो मैं फ़ाइल तत्व क्लिक करना चाहता हूं।

मैं jQuery का उपयोग नहीं कर सकता क्योंकि मैं अपने पृष्ठ में कैलेंडर के लिए MooTools लाइब्रेरी का उपयोग कर रहा हूं और जब मैं jQuery का उपयोग करने का प्रयास करता हूं तो यह संघर्ष करता है। मैंने jQuery.noConflict(); का उपयोग करके संघर्ष से बचने की भी कोशिश की लेकिन मैं ऐसा नहीं कर सका क्योंकि मैं jQuery में नया हूं।

<input name="myfile" id="uploadme" type="file" style="visibility:hidden; width:1px;" onchange="this.form.submit()"/> 
<input type="button" id="clickme" onclick="show_upload()"/>

यहाँ और मेरे जावास्क्रिप्ट कोड है: यहाँ मेरी html कोड है

function show_upload() 
{ 
    document.getElementById('uploadme').click(); 
}

मैं भी इस jQuery कोड की कोशिश की लेकिन मैं इसे MooTools पुस्तकालय के साथ संघर्ष के बिना काम नहीं कर सके:

jQuery.noConflict(); 
(function($){ 
    $('#clickme').click(function($){ 
     $('#uploadme').click(); 
    })(jQuery); 
});

स्रोत

2011-08-07 Rafael Sedrakyan

क्यों आप jQuery टैग जोड़ लिया है, तो आप इसका इस्तेमाल नहीं कर सकते? – PeeHaa

@PeeHaa: शायद वह म्यूटूल के साथ jQuery काम करने में मदद चाहता है, इसलिए 'jquery' टैग किया गया एक प्रश्न बिल्कुल अजीब नहीं है :) – pimvdb

मुझे इनपुट क्लिक के लिए निश्चित नहीं है (सुरक्षा कारणों से यह असंभव हो सकता है), लेकिन आपका jQuery कोड पूरी तरह से सही नहीं है।

jQuery.noConflict(); 

(function($){ 
    $('#clickme').click(function(){ // The $ is not necessary - you already have it 
     $('#uploadme').click(); 
    }); // You should remove (jQuery) because you don't want to call the function here 
})(jQuery); // you need (jQuery) to actually call the function - you only defined the function

वैसे भी, इस उत्तर का कहना है आप ओपेरा में आप क्या चाहते हैं नहीं कर सकते: In JavaScript can I make a "click" event fire programmatically for a file input element?

स्रोत

2011-08-07 17:01:38 pimvdb

लिंक – Halcyon

के लिए +1 आप jquery code के बारे में सही थे :) लेकिन मैंने इसे बनाया आपके द्वारा पोस्ट किए गए लिंक में वर्णित तरीका। मदद के लिए बहुत बहुत धन्यवाद। –

अब आधुनिक ब्राउज़र में काम नहीं करता है! –

input[type=file] बहुत अजीब इनपुट प्रकार, तुम सच में एक पूरी बहुत कुछ इसके साथ, मुख्य रूप से सुरक्षा कारणों से ऐसा नहीं कर सकते है।

मैं अनुमान लगा रहा हूं, लेकिन क्या आप शायद स्टाइल अपलोड बटन चाहते हैं? उस स्थिति में मुझे आपको निराश करना होगा, आप इसे HTML के साथ नहीं कर सकते हैं। आप या तो HTML5 या Flash उपयोग करने के लिए (SWFUpload की तरह)

स्रोत

2011-08-07 17:11:59 Halcyon

http://jsfiddle.net/sSSNj/159/ इस लिंक को चेक करें और आप देखेंगे कि आप अपना खुद का स्टाइल अपलोड बटन प्राप्त कर सकते हैं :) –

हां, लेकिन आप 'दृश्यता: छुपा' हैक का उपयोग कर रहे हैं। मुझे लगता है कि यह केवल ब्राउज़र के उदारता के कारण है जो यह काम करता है, और स्पष्ट रूप से यह ओपेरा में नहीं है। – Halcyon

+1 क्योंकि यह सच है। 'इनपुट प्रकार = फ़ाइल' हैकिंग के लिए बहुत कमजोर है, और इस प्रकार इसकी विशेषताओं में काफी लॉक हो गया है। हां, ऐसे हैक हैं जो अधिकांश ब्राउज़रों में इसे स्टाइल करने के लिए काम करते हैं, लेकिन वे केवल यही हैं: सुरक्षा सीमाओं के आसपास पाने के लिए लिखा गया हैक्स। और अगर वे सुरक्षा में बदलाव करते हैं तो वे भविष्य के ब्राउज़र संस्करणों में काम करना बंद कर देंगे। – Spudley

-2

यह असंभव है कि बटन जावास्क्रिप्ट का उपयोग (जैसे मित्रों ने कहा है) क्लिक करने के लिए है, लेकिन यह देखेंगे:

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Lorem ipsum</title> 
    </head> 
    <body> 
     <input type="file" id="first" style="width:200px; background-color:red"> 
     <input type="file" id="second" style="width:200px; background-color:green; position:relative; left:-100px; opacity:0"> 
     <script> 
      document.getElementById("first").onchange = function(){alert("first")} 
      document.getElementById("second").onchange = function(){alert("second")} 
     </script> 
    </body> 
</html>

आप ऐसा ही कुछ कर सकते हैं। केवल समस्या यह है कि आपको इन इनपुट के आयामों को जानना होगा। एचएम ... शायद यह समस्या नहीं है। आप आयाम सेट कर सकते हैं। :>

स्रोत

2011-08-07 17:32:22

थांस्क। मैंने इसे पहले ही 10 मिनट पहले वर्णित तरीके से बनाया है। –

फ़ाइल तत्व के लिए यह कैसे क्लिक कर सकता है? – Mahi

यह एक ओपेरा बग है, लेकिन वहाँ एक अलग तरह से परिणाम प्राप्त करने के संभावना है, <label> टैग का उपयोग:

<input type="file" id="file" style="position: absolute; visibility: hidden;"> 
<label for="file" id="file-label"></label> 
<a onclick="$('#file-label').click()">Browse..</a>

स्रोत

2013-05-04 00:08:36

यह असंभव नहीं है:

var evObj = document.createEvent('MouseEvents'); 
evObj.initMouseEvent('click', true, true, window); 
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

लेकिन किसी भी तरह यह काम करता है केवल अगर यह एक फ़ंक्शन में है जिसे क्लिक-ईवेंट के माध्यम से बुलाया गया था।

तो आप निम्नलिखित सेटअप हो सकता है:

एचटीएमएल:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div> 
<input type="file" id="input_img">

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

function openFileChooser() { 
     var evObj = document.createEvent('MouseEvents'); 
     evObj.initMouseEvent('click', true, true, window); 
     setTimeout(function() 
     { 
     document.getElementById('input_img').dispatchEvent(evObj);  
     },100);  
    }

स्रोत

2015-10-03 00:24:15 EscapeNetscape

initMouseEvent कई ब्राउज़र से हटा दिया जा रहा है :( – Mahi

इनपुट पर क्लिक() का उपयोग करने में समस्या [प्रकार = फ़ाइल]

उत्तर

संबंधित मुद्दे