HTML फॉर्म में फ़ाइल फ़ील्ड की मनमानी उपस्थिति, सभी ब्राउज़रों में समान है

विकास के बावजूद, ब्राउज़रों में नए मानकों और अच्छाइयों को लागू करना, डिफ़ॉल्ट रूप से /> तत्व प्रदर्शित करने के लिए एक समान मानक नहीं हैं। इसके अलावा, इस तत्व की कोई विशेषता नहीं है जो इसे कुछ हद तक स्टाइल करने की अनुमति देता है।
इस फ़ॉर्म फ़ील्ड को सभी ब्राउज़रों में एक समान दृश्य में लाने और विकसित डिज़ाइन में "फिट" करने की आवश्यकता के कारण, इंटरनेट पर सामग्री की खोज और विश्लेषण करने के बाद, फॉर्म फ़ील्ड प्रकार को html + css, और js को कार्यक्षमता का विस्तार करने के लिए बदलने के लिए एक विधि विकसित की गई थी।

यह फ़ील्ड डिफ़ॉल्ट रूप से कैसी दिखती है?

<input id="upload" type="file" name="upload" /> 

यह वही है जो इंटरनेट एक्सप्लोरर 9 में दिखता है:


और इसलिए - फ़ायरफ़ॉक्स में:


Google Chrome में:


ओपेरा में:


सफारी में:

फ़ाइल फ़ील्ड को स्टाइल करना

उस स्थान पर जहां फ़ाइल चयन फ़ील्ड होनी चाहिए, निम्नलिखित कोड डालें:

 <div class="fileform"> <div class="selectbutton"></div> <input id="upload" type="file" name="upload" /> </div> 

शैलियों फ़ाइल में निम्नलिखित ब्लॉक जोड़ें:

 .fileform { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 2px; cursor: pointer; height: 26px; overflow: hidden; padding: 2px; position: relative; text-align: left; vertical-align: middle; width: 230px; } .fileform .selectbutton { background-color: #A2A3A3; border: 1px solid #939494; border-radius: 2px; color: #FFFFFF; float: right; font-size: 16px; height: 20px; line-height: 20px; overflow: hidden; padding: 2px 6px; text-align: center; vertical-align: middle; width: 50px; } .fileform #upload{ position:absolute; top:0; left:0; width:100%; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; font-size: 150px; height: 30px; z-index:20; } 

अब सभी ब्राउज़रों में फॉर्म फ़ील्ड एक समान दिखता है, जबकि फ़ाइल चयन फ़ॉर्म अभी भी फ़ील्ड और बटन दोनों पर क्लिक करके प्रकट होता है:


मानक रूप से प्राप्त समाधान का मुख्य दोष यह है कि यह नेत्रहीन संकेत नहीं करता है कि फ़ाइल का चयन किया गया है। यह समस्या जावास्क्रिप्ट का उपयोग करके हल की गई है।

चयनित फ़ाइल के बारे में एक हस्ताक्षर जोड़ना

हम फ़ील्ड में एक ईवेंट हैंडलर फ़ंक्शन और एक और ब्लॉक हेडर जोड़ते हैं और निश्चित रूप से, ब्लॉक को इसकी शैली:

 <div class="fileform"> <div id="fileformlabel"></div> <div class="selectbutton"></div> <input type="file" name="upload" id="upload" onchange="getName(this.value);" /> </div> 

 .fileform #fileformlabel { background-color: #FFFFFF; float: left; height: 22px; line-height: 22px; overflow: hidden; padding: 2px; text-align: left; vertical-align: middle; width:160px; } 

हैंडलर फ़ंक्शन स्वयं चयनित फ़ाइल का पूरा नाम प्राप्त करता है, पथ को अलग करता है (विभिन्न फ़ाइल सिस्टम के लिए सत्यापन के साथ), फ़ाइल नाम चर में एक्सटेंशन के साथ नाम को बचाता है और इसे फ़ाइलफॉर्मलेबेल ब्लॉक पर लिखता है।

 function getName (str){ if (str.lastIndexOf('\\')){ var i = str.lastIndexOf('\\')+1; } else{ var i = str.lastIndexOf('/')+1; } var filename = str.slice(i); var uploaded = document.getElementById("fileformlabel"); uploaded.innerHTML = filename; } 

अब फॉर्म फ़ील्ड इस तरह दिखता है (आप इसका आकार, रंग, फ़ॉन्ट और संरेखण बदल सकते हैं):



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