बटन दिखाने के लिए एक बटन का चयन करें संवाद बॉक्स

Question

input type="file" एचटीएमएल टैग का उपयोग करने के बजाय, input type="button" पर क्लिक करके choose a file to upload संवाद बॉक्स लाने के लिए संभव है? फिर जब choose a file to upload संवाद बॉक्स से फ़ाइल का चयन किया जाता है, तो फ़ाइल पथ नियमित HTML input type="text" टैग में डाला जाता है?

मुझे लगता है कि जीमेल कुछ समान करता है लेकिन बटन और टेक्स्ट इनपुट के साथ नहीं, उनके पास बस एक लिंक add file या ऐसा कुछ है। जब वह लिंक क्लिक किया जाता है, तो यह select file(s) to upload by mail.google.com संवाद बॉक्स दिखाता है। जब कोई फ़ाइल क्लिक की जाती है, तो फ़ाइल का नाम स्क्रीन पर दिखाया जाता है।

वे यह कैसे कर रहे हैं?

Answer 1

मुझे लगता है कि अधिकांश ब्राउज़रों ने सुरक्षा उद्देश्यों के लिए इसे बंद कर दिया है। बटन और टेक्स्ट बॉक्स को जावास्क्रिप्ट के माध्यम से छेड़छाड़ की जा सकती है। फ़ाइल इनपुट बॉक्स नहीं कर सकते हैं, और अच्छे कारण के लिए; कल्पना करें कि क्या जावास्क्रिप्ट एक संवाद खोल सकता है, पथ को अपने सिस्टम पर एक संवेदनशील फ़ाइल पर सेट करें, फिर फ़ाइल को डाउनलोड करने के लिए बटन को अनुकरण करें!

---

वैसे, आप इसे शैली के लिए देख रहे हैं, तो शायद यह काम करेगा: http://www.quirksmode.org/dom/inputfile.html

Answer 2

यह एक input[type=file] को बदलने के लिए संभव नहीं है के रूप में आप की तरह है, यह एक विशुद्ध रूप से मूल रूप तत्व है।

इसके अलावा आप सुरक्षा कारणों से फ़ाइल का मार्ग प्राप्त नहीं कर पाएंगे। पुराने आईई संस्करण पथ दिखाते हैं लेकिन यह अब नए संस्करणों के साथ मामला नहीं है और आप सर्वर-साइड पर रास्ते के साथ कुछ भी करने में सक्षम नहीं होंगे।

हालांकि शैली के लिए कुछ तरीकों के होते हैं:

• Styling File Upload/Select Input Control
• Styling an input type="file"
• Styling file inputs with CSS and the DOM

Answer 3

plupload पर एक नज़र डालें, मैं इसे कई बार उपयोग किया है फ़ाइल अपलोड संभाल करने ।

Answer 4

चेक इस बेला: http://jsfiddle.net/A4BS7/1/

नोट:

एक) यह पुराने ब्राउज़र (मुख्य रूप से आईई) उस फ़ाइल इनपुट पर परिवर्तन घटना आग नहीं है पर अच्छी तरह से काम न करें।

बी) अपलोड के लिए अपलोड करने के लिए अपलोड करने के लिए, आपको अपने फॉर्म में <input type="file"> तत्व शामिल करना होगा। चयनित तत्व को सर्वोत्तम रूप से प्रदर्शित करने के लिए टेक्स्ट तत्व का उपयोग किया जा सकता है।

Answer 5

<input type="file" style="display:none;" id="inputfile"/> 
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a> 

इसे आजमाएं। मुझे लगता है कि यह उपयोगी है .. :)