2009-12-01 7 views
30

संभव डुप्लिकेट:
In JavaScript can I make a “click” event fire programmatically for a file input element?jQuery: एक <इनपुट प्रकार = "फ़ाइल" /> पर क्लिक को अनुकरण करना फ़ायरफ़ॉक्स में काम नहीं करता है?

मैं एक वेब पेज है कि लग रहा है इस

<html> 
    <head> 
     <title>File Upload Click Test</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    </head> 
    <body> 
     <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div> 
     <input type="file"></input> 
    </body> 
</html> 

मेरा लक्ष्य है करने के लिए div एक क्लिक बढ़ा है की तरह मिल गया है फ़ाइल इनपुट पर ईवेंट, और ऐसा लगता है कि मैं ठीक से काम करता हूं आईई और क्रोम में pect, लेकिन फ़ायरफ़ॉक्स में काम नहीं करता है (जब आप div पर क्लिक करते हैं तो कोई फ़ाइल ब्राउज़र खोला नहीं जाता है)।

क्या यह एफएफ में काम करने का कोई तरीका है?

+1

यह FF4 में आ रहा है: https://developer.mozilla.org/en/using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method –

+0

इस जवाब देखें http://stackoverflow.com/questions/210643/in -javascript-can-i-make-a-click-event-fire-programmatically-a-file-input-e/3030174 # 3030174 यह एफएफ में भी काम करता है – TheVillageIdiot

+0

आज सुबह मैंने स्क्रिप्ट का परीक्षण किया और यह फ़ायरफ़ॉक्स में ठीक काम है 4. फ़ायरफ़ॉक्स 4 फ़ाइल इनपुट पर क्लिक ईवेंट की अनुमति देता है। – kriom

उत्तर

34

क्या यह एफएफ में काम करने का कोई तरीका है?

नहीं, और यह IE के अधिकांश सामान्य संस्करणों में काम नहीं करता है। आईई संवाद खोल देगा, लेकिन एक बार जब आप इसके साथ फाइल चुन लेते हैं तो फॉर्म वास्तव में सबमिट नहीं होगा।

उम्मीद की उम्मीद है। नकली फ़ाइल अपलोड बॉक्स का एकमात्र तरीका पारदर्शिता तकनीक का उपयोग कर रहा है, और वास्तव में यह बिल्कुल अनुशंसित नहीं है क्योंकि ब्राउजर फ़ाइल अपलोड बक्से अलग-अलग आंतरिक रूप से रख सकते हैं (या एक फ़ाइल अपलोड नियंत्रण भी प्रदान करते हैं जिसमें ब्राउज़ संवाद शामिल नहीं है) यह अत्यधिक संभावना है कि आप एक अयोग्य रूप से समाप्त हो जाएंगे।

ग्रे फ़ाइल अपलोड फ़ील्ड से प्यार करना सीखें, या फ्लैश के साथ इसे बदलने के लिए प्रगतिशील वृद्धि का उपयोग करें।

+42

आशा छोड़ दो। चेक। – kristian

+7

यह अब फ़ायरफ़ॉक्स 4 में काम कर रहा है। –

+1

अच्छा धन्यवाद मुझे किसी और समय बर्बाद करने की इजाजत नहीं देता ..हाथ में आशा के साथ पहले से ही इस पर कुछ दिन बिताए हैं। –

21

यहां वर्कअराउंड (एफएफ) है। एचटीएमएल बिट: इनपुट फ़ाइल प्रकार के लिए

<label>Upload Business Logo</label> 
<input type="file" name="logo" id="logo" class="file-upload" /> 
<input type="text" id="text-logo" class="text-upload" readonly/> 
<input type="button" id="btn-logo" class="btn-upload" alt="" /> 

सीएसएस:

.file-upload { display:none; } 

jQuery बिट:

//bind click 
$('#btn-logo').click(function(event) { 
    $('#logo').click(); 
}); 

//capture selected filename 
$('#logo').change(function(click) { 
    $('#text-logo').val(this.value); 
}); 

प्रपत्र पर सबमिट करते हैं, छिपा इनपुट फ़ाइल फ़ाइल अपलोड कर देगा। आशा इस मदद करता है :)

+0

क्या आपने कोड को आजमाया था? अगर यह इतना आसान था, तो पूछताछ क्यों होगी? मैं यहाँ क्यों होगा? आखिरी बार मैंने जांच की, आप फ़ाइल इनपुट के मान को सेट नहीं कर सकते हैं। और स्पष्ट रूप से आप उन पर घटनाओं को ट्रिगर नहीं कर सकते हैं। शायद सुरक्षा कारणों से। – Stoutie

+2

मैं इसे वापस लेता हूं, ऐसा लगता है कि यह इतना आसान है। लेकिन यह कंसोल में कोशिश करते समय काम नहीं करता है। जब मैं अपने दस्तावेज़ में कोड डालता हूं, तो यह ठीक काम करता प्रतीत होता है। Derp। – Stoutie

+1

+1 यह पूरी तरह से काम करता है, बस कंसोल में नहीं! अजीब, मुझे लगता है कि यह सुरक्षा उद्देश्यों के लिए है। – ksloan

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