लेबलिंग फ़ाइल अपलोड बटन

Question

मैं फ़ाइल पिकर के बटन टेक्स्ट को अंतर्राष्ट्रीय कैसे बना सकता हूं? उदाहरण के लिए, क्या इस कोड को उपयोगकर्ता के लिए प्रस्तुत करता है:

<input type="file" .../> 

Answer 1

यह सामान्य रूप से ब्राउज़र द्वारा प्रदान की और बदलने के लिए कड़ी मेहनत कर रहा है, तो यह चारों ओर एक ही रास्ता एक सीएसएस/जावास्क्रिप्ट हैक हो जाएगा,

कुछ दृष्टिकोण के लिए निम्न लिंक देखें:

• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
• http://www.quirksmode.org/dom/inputfile.html
• http://www.dreamincode.net/forums/showtopic15621.htm

Answer 2

आप अपने बटन के लिए अपने ब्राउज़र की भाषा मिलता है। प्रोग्रामेटिक रूप से इसे बदलने का कोई तरीका नहीं है।

Answer 3

मैं निम्नलिखित कोड के साथ jQueryMobile का उपयोग कर एक बटन प्राप्त कर सकता हूं:

<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label> 
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/> 

ऊपर कोड "अपलोड" बटन (कस्टम टेक्स्ट) बनाता है। अपलोड बटन पर क्लिक करने पर, फ़ाइल ब्राउज़ लॉन्च किया जाता है। क्रोम 25 & आईई 9 के साथ परीक्षण किया गया।

Answer 4

एक कस्टम "ब्राउज़ बटन" समाधान बनाने के लिए बस एक छुपा ब्राउज़ बटन, एक कस्टम बटन या तत्व और कुछ Jquery बनाने का प्रयास करें। इस तरह मैं वास्तविक "ब्राउज़ बटन" को संशोधित नहीं कर रहा हूं जो प्रत्येक ब्राउज़र/संस्करण पर निर्भर है। यहाँ एक example.

एचटीएमएल है:

<div id="import" type="file">My Custom Button</div> 
<input id="browser" class="hideMe" type="file"></input> 

सीएसएस:

#import { 
    margin: 0em 0em 0em .2em; 
    content: 'Import Settings'; 
    display: inline-block; 
    border: 1px solid; 
    border-color: #ddd #bbb #999; 
    border-radius: 3px; 
    padding: 5px 8px; 
    outline: none; 
    white-space: nowrap; 
    -webkit-user-select: none; 
    cursor: pointer; 
    font-weight: 700; 
    font: bold 12px/1.2 Arial,sans-serif !important; 
    /* fallback */ 
    background-color: #f9f9f9; 
    /* Safari 4-5, Chrome 1-9 */ 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727)); 
} 

.hideMe{ 
    display: none; 
} 

जे एस:

$("#import").click(function() { 
    $("#browser").trigger("click"); 
    $('#browser').change(function() { 
      alert($("#browser").val()); 
    }); 
}); 

Answer 5

एक कदम वापस ले जाएं! सबसे पहले, आप मानते हैं कि उपयोगकर्ता अपने डिवाइस पर एक विदेशी लोकेल का उपयोग कर रहा है, जो कि फाइल पिकर के बटन टेक्स्ट को उचित ठहराने के लिए एक ठोस धारणा नहीं है, और यह कहकर आपको चाहते हैं।

यह उचित है कि आप अपने पृष्ठ पर दिखाई देने वाली भाषा के प्रत्येक आइटम को नियंत्रित करना चाहते हैं। फ़ाइल अपलोड नियंत्रण की सामग्री हालांकि HTML का हिस्सा नहीं है। इस नियंत्रण के पीछे और अधिक सामग्री है, उदाहरण के लिए, वेबकिट में, यह भी बटन के बगल में "कोई फ़ाइल नहीं चुनी गई" कहती है।

बहुत hacky समाधान है कि इस प्रयास (@ ChristopheD के जवाब में बताया गया उन जैसे जैसे) होते हैं, लेकिन उनमें से कोई भी सही मायने में सफल हो:

• एक स्क्रीन रीडर के लिए, फ़ाइल नियंत्रण अभी भी कहते हैं कि "ब्राउज होगा। .. "या" फ़ाइल चुनें ", और एक कस्टम फ़ाइल अपलोड को फ़ाइल अपलोड नियंत्रण के रूप में घोषित नहीं किया जाएगा, लेकिन केवल एक बटन या एक टेक्स्ट इनपुट।
• उनमें से कई चुने गए फ़ाइल को प्रदर्शित करने में विफल रहते हैं, या यह दिखाने के लिए कि उपयोगकर्ता ने अब फ़ाइल
• नहीं चुना है उनमें से कई देशी नियंत्रण की तरह कुछ भी नहीं दिखते हैं, इसलिए गैर मानक उपकरणों पर अजीब लग सकता है।
• कीबोर्ड समर्थन आमतौर पर खराब है।
• एक लेखक द्वारा निर्मित यूआई घटक अपने मूल समकक्ष के रूप में पूरी तरह कार्यात्मक नहीं हो सकता है (और विंडोज 7 पर आईई 10 मानने के लिए जितना करीब हो, उतना ही यह अन्य ब्राउज़र और ऑपरेटिंग सिस्टम संयोजनों से विचलित हो जाएगा)।
• आधुनिक ब्राउज़र ड्रैग & मूल फ़ाइल अपलोड नियंत्रण में ड्रॉप का समर्थन करते हैं।
• कुछ तकनीकें सुरक्षा सॉफ्टवेयर में हेरिस्टिक को एक संभावित 'क्लिक-जैकिंग' प्रयास के रूप में उपयोगकर्ता को फ़ाइल अपलोड करने के लिए ट्रिक करने का प्रयास कर सकती हैं।

देशी नियंत्रण से भी घूम हमेशा एक जोखिम भरा बात अलग से उपकरण आपके उपयोगकर्ताओं का उपयोग कर किया जा सकता है की एक पूरी मेजबान है है, और जो कुछ भी वैकल्पिक हल आप चुनते हैं, आप उन उपकरणों में से हर एक में इसका परीक्षण किया है नहीं होगा।

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

क्या आप वाकई अपने उपयोगकर्ता को मूल नियंत्रण से विचलित करके कोई न्याय कर रहे हैं, बस टेक्स्ट को स्थानीयकृत करने के लिए, जैसे ही वे इसे क्लिक करते हैं, वे अभी भी ऑपरेटिंग सिस्टम लोकेल प्राप्त करने जा रहे हैं?

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

क्षमा करें। :-(

-

इस उत्तर किसी भी औचित्य नहीं फ़ाइल अपलोड नियंत्रण स्थानीय बनाना की तलाश में उन लोगों के लिए है

Answer 6

शुद्ध सीएसएस समाधान:

.inputfile { 
 
    /* visibility: hidden etc. wont work */ 
 
    width: 0.1px; 
 
    height: 0.1px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 
.inputfile:focus + label { 
 
    /* keyboard navigation */ 
 
    outline: 1px dotted #000; 
 
    outline: -webkit-focus-ring-color auto 5px; 
 
} 
 
.inputfile + label * { 
 
    pointer-events: none; 
 
}

<input type="file" name="file" id="file" class="inputfile" /> 
 
<label for="file">Choose a file (Click me)</label>

।

स्रोत: http://tympanus.net/codrops

Answer 7

बहुत आसान उपयोग यह

<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" /> 
<input type="file" style="display:none;" id="file" name="file"/>