<input type="file" value="Browse" name="avatar" id="id_avatar" />मैंने valueइसे संशोधित करने की कोशिश की , लेकिन यह काम नहीं कर रहा है। बटन टेक्स्ट कैसे कस्टमाइज़ करें?
जवाबों:
बूटस्ट्रैप FileStyle का उपयोग करें , जिसका उपयोग रूपों के फ़ाइल फ़ील्ड को स्टाइल करने के लिए किया जाता है। यह ट्विटर बूटस्ट्रैप नामक jQuery- आधारित घटक पुस्तकालय के लिए एक प्लगइन है
नमूना उपयोग:
शामिल:
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>वाया जावास्क्रिप्ट:
$(":file").filestyle();डेटा विशेषताएँ:
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">आप इसके बजाय एक छवि डाल सकते हैं, और इसे इस तरह से कर सकते हैं:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});गुफा : IE9 और IE10 में यदि आप जावास्क्रिप्ट के माध्यम से एक फ़ाइल इनपुट में onClick को ट्रिगर करते हैं, तो फॉर्म को 'खतरनाक' के रूप में चिह्नित किया जाएगा और इसे जावास्क्रिप्ट के साथ प्रस्तुत नहीं किया जा सकता है, यह सुनिश्चित नहीं है कि यह पारंपरिक रूप से प्रस्तुत किया जा सकता है।
<input type="file" asp.net ग्रिडव्यू पंक्ति के अंदर उपयोग कर रहा हूं , जिनकी पंक्तियों को गतिशील रूप से जोड़ा जा सकता है .. इसलिए छवि पर क्लिक करते समय संबंधित इनपुट क्लिक ट्रिगर (उसी पंक्ति का) को कॉल करने के लिए सिर में एक वास्तविक दर्द होगा! : /
फ़ाइल इनपुट छिपाएँ। क्लिक ईवेंट को कैप्चर करने के लिए एक नया इनपुट बनाएं और इसे छिपे हुए इनपुट पर अग्रेषित करें:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>;अंत में हटाना पड़ा ।
"अपलोड फ़ाइल ..." पाठ ब्राउज़र द्वारा पूर्व-परिभाषित है और इसे बदला नहीं जा सकता है। इसके आस-पास आने का एकमात्र तरीका फ़्लैशफ या लोड आधारित जावा जैसे अपलोड घटक का उपयोग करना है ।
पूरी तरह से सभी ब्राउज़रों पर काम करता है आशा है कि यह आपके लिए भी काम करेगा।
HTML:
<input type="file" class="custom-file-input">
सीएसएस:
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}अपने content: 'Select some files';इच्छित पाठ के साथ बदलें''
अगर फ़ायरफ़ॉक्स के साथ काम नहीं कर रहा है तो इनपुट के बजाय इसका उपयोग करें:
<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Your name</span>
<input id="uploadBtn" type="file" class="upload" />
</div>जे एस
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};अधिक http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
केवल
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>[स्निपेट के साथ संपादित करें]
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>संपादित करें : मैं अब उन टिप्पणियों द्वारा देखता हूं जो आप बटन पाठ के बारे में पूछ रहे हैं, न कि फ़ाइल पथ के बारे में। मेरी गलती। मैं अपना मूल उत्तर किसी और के मामले में नीचे छोड़ दूंगा, जो इस प्रश्न पर लड़खड़ाता है, यह इस बात की व्याख्या करता है कि मैंने मूल रूप से क्या किया था।
दूसरा EDIT : मैंने यह उत्तर हटा दिया था क्योंकि मैंने फैसला किया था कि मैंने प्रश्न को गलत समझा और मेरा उत्तर प्रासंगिक नहीं था। हालांकि, एक अन्य जवाब में टिप्पणियों ने संकेत दिया कि लोग अभी भी इस जवाब को देखना चाहते थे इसलिए मैं इसे हटा रहा हूं।
मेरा मूल उत्तर (मुझे लगा कि ओपी पथ के बारे में पूछ रहा था, बटन पाठ नहीं):
यह सुरक्षा कारणों से समर्थित सुविधा नहीं है । ओपेरा वेब ब्राउज़र इसका समर्थन करता था लेकिन इसे हटा दिया गया था। इस बारे में सोचें कि अगर यह समर्थन किया जाता है तो क्या संभव होगा; आप एक फ़ाइल अपलोड इनपुट के साथ एक पेज बना सकते हैं, इसे कुछ संवेदनशील फ़ाइल के लिए पथ के साथ पूर्व-आबाद कर सकते हैं और फिर onloadघटना द्वारा ट्रिगर जावास्क्रिप्ट का उपयोग करके फ़ॉर्म को ऑटो सबमिट कर सकते हैं । यह उपयोगकर्ता के लिए इसके बारे में कुछ भी करने के लिए बहुत तेज़ी से होगा।
<label>कैप्शन के लिए उपयोग करें<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
<u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
onchange='optionalExtraProcessing(b1.files[0])'
accept='image/png'>
</label>
</form>यह बिना किसी जावास्क्रिप्ट के काम करता है । आप अपने दिल की सामग्री को लेबल को जटिलता के किसी भी हद तक सजा सकते हैं। जब आप लेबल पर क्लिक करते हैं, तो क्लिक स्वचालित रूप से फ़ाइल इनपुट पर पुनर्निर्देशित हो जाती है। फ़ाइल इनपुट को ही किसी भी विधि द्वारा अदृश्य बनाया जा सकता है। यदि आप चाहते हैं कि लेबल एक बटन की तरह दिखाई दे, तो कई समाधान हैं, जैसे:
label u {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}केवल CSS और बूटस्ट्रैप क्लास
<div class="col-md-4 input-group">
<input class="form-control" type="text"/>
<div class="input-group-btn">
<label for="files" class="btn btn-default">browse</label>
<input id="files" type="file" class="btn btn-default" style="visibility:hidden;"/>
</div>
</div><input type="file">, एक छवि जोड़ें और <input style="position:absolute">यह की जगह पर कब्जा होगा<input type="file">फ़ाइल तत्व के लिए निम्नलिखित सीएसएस का उपयोग करें
position:relative;
opacity:0;
z-index:99;यदि आप रेल का उपयोग कर रहे हैं और इसे लागू करने में समस्या है, तो मैं @Fernando Kosh द्वारा पोस्ट किए गए मूल उत्तर से कुछ सुझाव जोड़ना चाहूंगा
अपना एप्लिकेशन खोलें। js और इस पंक्ति को नीचे जोड़ें
// = बूटस्ट्रैप-फाइलस्ट्रीम की आवश्यकता है
अपनी कॉफी खोलें और इस लाइन को जोड़ें
$ (": फाइल")। फिलिस्तीन ({बटननाम: "बीटीएन-प्राइमरी", बटनबियर: सच, बटन टेक्स्ट: "आपका पाठ यहां", आइकन: गलत});
आप बस कुछ सीएसएस ट्रिक जोड़ सकते हैं। आपको जावास्क्रिप्ट या अधिक इनपुट फ़ाइलों की आवश्यकता नहीं है और मैं मौजूदा मूल्य विशेषता रखता हूं । आपको केवल css जोड़ने की आवश्यकता है । आप इस समाधान की कोशिश कर सकते हैं।
.btn-file-upload{
width: 187px;
position:relative;
}
.btn-file-upload:after{
content: attr(value);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 48%;
background: #795548;
color: white;
border-radius: 2px;
text-align: center;
font-size: 12px;
line-height: 2;
}<input type="file" class="btn-file-upload" value="Uploadfile" />मेरे लिए यह बूटस्ट्रैप-फिल्मस्टाइल के साथ कस्टम टेक्स्ट पर काम नहीं करता है । यह बटन की सजावट के साथ मदद करता है, लेकिन पाठ को बदलने के लिए अजीब है, सीएसएस के साथ कुश्ती में आने से पहले मैं निम्नलिखित प्रयास करता हूं:
$( document ).ready(function() {
$('.buttonText').html('Seleccione ficheros');
});बूटस्ट्रैप-फिलिस्तीन घटक को एक वर्ग के रूप में प्रस्तुत करता है जिसका नाम बुटोनटेक्स्ट है, इसलिए जब दस्तावेज़ लोड केवल पाठ को बदलते हैं। आसान सही है और इसे सभी ब्राउज़रों पर काम करना चाहिए।
चियर्स
मैंने इसे अपनी परियोजना के लिए इस तरह किया:
.btn-outlined.btn-primary {
color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color:#000;
}
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">यह एक वैकल्पिक समाधान है जो आपकी मदद कर सकता है। यह बटन से प्रकट होने वाले पाठ को छुपाता है, इसे div के पृष्ठभूमि-रंग के साथ मिलाता है। फिर आप डिव को अपनी पसंद का शीर्षक दे सकते हैं।
<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file" />
</div>