इनपुट प्रकार = फ़ाइल के HTML "ब्राउज़ करें" बटन का नाम कैसे बदलें?

Question

ब्राउज़ बटन का नाम बदलने के लिए "फ़ाइल" चुनें? उदा .:

<input type=file name=browse > 

Answer 1

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

आप the technique outlined on QuirksMode का उपयोग कर अपलोड नियंत्रण के लिए एक कस्टम रूप लागू कर सकते हैं, लेकिन यह केवल बटन के टेक्स्ट को बदलने से परे है।

Answer 2

इनपुट प्रकार = "फाइल" क्षेत्र है, क्योंकि यह हर ब्राउज़र पर अलग ढंग से व्यवहार करती है, यह स्टाइल नहीं किया जा सकता, या एक छोटे से स्टाइल किया जा सकता है, फिर ब्राउज़र के आधार पर बहुत मुश्किल है, और इसका आकार बदलना मुश्किल है (ब्राउज़र पर निर्भर करता है, इसमें न्यूनतम आकार हो सकता है जिसे ओवरराइट नहीं किया जा सकता है)।

हालांकि कामकाज हैं। सबसे अच्छा मेरी राय this one में है (परिणाम here है)।

Answer 3

नहीं, आप फ़ाइल अपलोड इनपुट का टेक्स्ट नहीं बदल सकते हैं। लेकिन बटन पर एक छवि ओवरले करने के लिए कुछ चाल हैं।

Answer 4

AFAIK आप बटन टेक्स्ट नहीं बदल सकते हैं, यह ब्राउज़र में हार्ड कोड किया गया है।

लेकिन वहाँ एक फार्म पर विभिन्न पाठ/छवि के साथ एक बटन रखने के लिए कई संभावित हल कर रहे हैं:

link

Answer 5

आप अपलोडिफ़ी का भी उपयोग कर सकते हैं, जो एक महान jQuery अपलोड प्लगइन है, यह आपको कई फाइलें अपलोड करने देता है, और फ़ाइल फ़ील्ड को आसानी से स्टाइल भी करता है। http://www.uploadify.com

Answer 6

JavaScript का एक बिट यह ध्यान रखना होगा:

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
    var textinput = document.getElementById("filename"); 
    textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

नहीं सबसे अच्छी लग रही समाधान है, लेकिन यह काम करता है।

Answer 7

<script language="JavaScript" type="text/javascript"> 
function HandleBrowseClick() 
{ 
    var fileinput = document.getElementById("browse"); 
    fileinput.click(); 
} 
function Handlechange() 
{ 
var fileinput = document.getElementById("browse"); 
var textinput = document.getElementById("filename"); 
textinput.value = fileinput.value; 
} 
</script> 

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/> 
<input type="text" id="filename" readonly="true"/> 
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/> 

http://jsfiddle.net/J8ekg/

Answer 8

आप एक सरल सीएसएस/JQ वैकल्पिक हल के साथ यह कर सकते हैं: एक नकली बटन जो ब्राउज़ बटन कि छिपा हुआ है चलाता है बनाएँ।

एचटीएमएल

<input type="file"/> 
<button>Open</button> 

सीएसएस

input { display: none } 

jQuery

$('button').click(function(e) { 
    e.preventDefault(); // prevents submitting 
    $('input').trigger('click'); 
}); 

demo

Answer 9

1. लपेटें <label> टैग के साथ;
2. लेबल के अंदर एक टैग (आपको जिस पाठ की आवश्यकता है) जोड़ें, जैसे <span> या <a>;
3. यह टैग एक बटन की तरह दिखें;
4. input[type="file"]display: none के माध्यम से अदृश्य बनाएं।