2012-01-12 11 views
7

मैं एक पोस्ट यहाँ था:IE9 फ़ाइल इनपुट ट्रिगर का उपयोग कर जावास्क्रिप्ट

.change acting weird in IE9

हालांकि, मैं एक नया घटना में चलाने की है फाइल अपलोड के रूप निपटने के बारे में और अगर किसी को भी इस मुद्दे को भी करना पड़ा है उत्सुक था ।

मेरी मूल समस्या यह थी कि मुझे काम करने के लिए एक अस्थायी घटना नहीं मिल सका और मैंने सोचा कि शायद यह मेरे जावास्क्रिप्ट के साथ एक मुद्दा था, लेकिन मुझे पता चला कि इसे फ़ॉर्म के सक्रिय होने के तरीके से करना है।

मैं एक फ़ाइल इनपुट

<input type="file" name="abc"/> 

अब मेरे द्वारा की गई 2 बातें की है।

मैंने इनपुट छुपाया है और एक बटन बनाया है (बेहतर स्टाइलिंग नियंत्रण के लिए) जो इनपुट को सक्रिय करता है।

<button id="mybutton">click to upload a pic</button> 
<input type="file" name="abc"/> 

और उसके बाद दोनों के बीच बातचीत के लिए जे एस:

$("#mybutton").click(function() { 
    $("Input[type=file]").click() 
}; 

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

$("input[type=file]").change(function() { 
    $(this).parent().submit(); 
}); 

जब मैं क्लिक करें "mybutton" अपेक्षित परिणाम मेरी ब्राउज़ विंडो खुलती है घटित करता है और मुझे मेरे कंप्यूटर से एक फ़ाइल चुनने देता है। इसके अलावा जब मैं IE के अलावा अन्य ब्राउज़रों में फ़ाइल को बदलता हूं तो अचयन ईवेंट निकाल दिया जाता है। अब अगर मैं फॉर्म को खोलता हूं और मैन्युअल रूप से "ब्राउज" बटन पर क्लिक करता हूं और एक एक्सचेंज इवेंट को निकाल दिया जाता है तो एक फाइल चुनें। तो मूल रूप से ब्राउज़र $ ("इनपुट [प्रकार = फ़ाइल]") से अलग वास्तविक फ़ाइल बटन पर क्लिक करने का व्यवहार करता है। क्लिक करें()

किसी को भी यह ठीक करने का तरीका पता है?

उत्तर

33

जैसा कि पहले कहा गया था, फ़ाइल आईएनपी युक्त फॉर्म जमा करते समय आईई बहुत सख्त है संघ राज्य क्षेत्रों। प्रपत्र जमा करने की अनुमति देने के लिए फ़ाइल इनपुट वास्तविक माउस क्लिक के साथ ट्रिगर किया जाना चाहिए। Additionnaly, IE9 और फ़ाइल इनपुट के साथ एक बग प्रतीत होता है।

  1. एक नियमित रूप से लेबल टैग अपनी फ़ाइल इनपुट से जुड़ा हुआ बनाएँ:

    अच्छी खबर यह एक तरह से IE से सुरक्षा प्रतिबंध बायपास करने के लिए एक लेबल का उपयोग है कि वहाँ है। लेबल इनपुट फ़ाइल को सामान्य रूप से ट्रिगर करेगा।

  2. सीएसएस का उपयोग कर लेबल के रूप में लेबल को छिपाएं।
  3. फ़ाइल इनपुट प्रदर्शित होना चाहिए (IE8 के लिए), लेकिन "दृश्यता: छुपा" का उपयोग करके छुपाया जा सकता है। आईई 8 इस हैक स्वीकार करेगा।
+1

मैन यह ठीक काम करता है, यह वही है जो मैं ढूंढ रहा था! मैंने आईई 9 में कई अन्य तरीकों का प्रयास किया है, लेकिन केवल यह काम किया है! – Daniel

+0

@ ए। क्लेमेंट धन्यवाद यह वास्तव में मुझे बचाया! –

+0

आईएमएचओ यह जवाब होना चाहिए था! –

2

यदि मुझे बहुत गलती नहीं है तो आप इसे बदल नहीं सकते हैं (मूल रूप से) उपयोगकर्ताओं के निजता की सुरक्षा के लिए किसी भी तरह से स्पष्ट उपयोगकर्ता अनुमति/कार्रवाई के बिना फ़ाइलों को अपलोड करने से बचाने के लिए है।

+1

एएचआईसी ... अच्छी तरह से एक समाधान जो मैंने देखा है इनपुट क्षेत्र लेना और इसे गलत बटन के आकार में स्टाइल करना है और इसे बटन के ऊपर छुपाएं (इसलिए कोई उपयोगकर्ता सोचता है कि वे एक क्लिक कर रहे हैं बटन लेकिन वे वास्तव में फॉर्म पर क्लिक कर रहे हैं)। यह सिर्फ verrrrry बदसूरत और बहुत दुखी सीएसएस के साथ सौदा करने के लिए है ... – Brodie

+0

मुझे लगता है कि आप फ्लैश का भी उपयोग कर सकते हैं! मुझे लगता है कि जीमेल की तरह ज्यादातर लोग इसका उपयोग कर रहे हैं। – Ali

0
  1. यकीन $("document").ready(function(){... here..});

  2. जब .live("change", function(){}); के साथ तार न काफी अच्छी तरह से काम

अन्य स्टाइल सामान कुछ और लेकिन सीएसएस 'isn है फ़ाइल आदानों लगता है में अपने कोड है टी सभी जटिल - beautiful file upload

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