इनपुट प्रकार = "फ़ाइल" बटन को स्टाइल करना
जवाबों:
स्टाइलिंग फ़ाइल इनपुट बेहद मुश्किल हैं, क्योंकि अधिकांश ब्राउज़र सीएसएस या जावास्क्रिप्ट से उपस्थिति नहीं बदलेंगे।
यहां तक कि इनपुट का आकार भी पसंद की प्रतिक्रिया नहीं देगा:
<input type="file" style="width:200px">इसके बजाय, आपको आकार विशेषता का उपयोग करने की आवश्यकता होगी:
<input type="file" size="60" />उससे अधिक परिष्कृत किसी भी स्टाइल के लिए (जैसे ब्राउज़ बटन का रूप बदलना) आपको मूल फ़ाइल इनपुट के शीर्ष पर स्टाइल बटन और इनपुट बॉक्स को ओवरले करने के ट्रिकी दृष्टिकोण को देखना होगा। पहले से ही www.quirksmode.org/dom/inputfile.html पर rm द्वारा उल्लिखित लेख सबसे अच्छा मैंने देखा है।
अपडेट करें
हालांकि किसी <input>टैग को सीधे स्टाइल करना मुश्किल है , लेकिन टैग की मदद से यह आसानी से संभव है <label>। नीचे देखें जवाब @JoshCrozier: https://stackoverflow.com/a/25825731/10128619 से
इसके लिए आपको जावास्क्रिप्ट की आवश्यकता नहीं है! यहाँ एक क्रॉस-ब्राउज़र समाधान है:
इस उदाहरण को देखें! - यह Chrome / FF / IE में काम करता है - (IE10 / 9/8/7)
सबसे अच्छा तरीका forएक छिपी फ़ाइल इनपुट तत्व से जुड़ी विशेषता के साथ एक कस्टम लेबल तत्व होना होगा । (लेबल की forविशेषता idइसके लिए काम करने के लिए फ़ाइल एलिमेंट से मेल खाना चाहिए )।
<label for="file-upload" class="custom-file-upload">
Custom Upload
</label>
<input id="file-upload" type="file"/>एक विकल्प के रूप में, आप फ़ाइल इनपुट तत्व को सीधे लेबल के साथ लपेट सकते हैं: (उदाहरण)
<label class="custom-file-upload">
<input type="file"/>
Custom Upload
</label>स्टाइल के संदर्भ में, विशेषता चयनकर्ता का उपयोग करके केवल 1 इनपुट तत्व को छिपाएं ।
input[type="file"] {
display: none;
}तो फिर तुम सब करने की जरूरत है कस्टम labelतत्व शैली है । (उदाहरण) ।
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}1 - यह ध्यान देने योग्य है कि यदि आप उपयोग करने वाले तत्व को छिपाते हैं display: none, तो यह IE8 और उसके नीचे काम नहीं करेगा। इस तथ्य से भी अवगत रहें कि jQuery सत्यापन डिफ़ॉल्ट रूप से छिपे हुए फ़ील्ड को मान्य नहीं करता है । यदि उन चीजों में से कोई भी आपके लिए एक समस्या है, तो इनपुट ( 1 , 2 ) को छिपाने के दो अलग-अलग तरीके हैं जो इन परिस्थितियों में काम करते हैं।
display: noneके लिए निर्धारित है input[type=file]?
position: absolute; left: -99999remबजाय उपयोग करना चाहिए display: none। अधिकांश समय, स्क्रीन रीडर तत्वों को नहीं पढ़ेंगे यदि वे display: noneविधि का उपयोग करके छिपे हुए हैं ।
labelतत्व buttonएस और inputएस के विपरीत, कीबोर्ड सुलभ नहीं हैं । जोड़ना tabindexकोई समाधान नहीं है क्योंकि labelजब भी फ़ोकस होगा, तब भी कार्रवाई नहीं होगी और उपयोगकर्ता दबाता है। मैं द्वारा इस हल नेत्रहीन , इनपुट छुपा तो यह अभी भी ध्यान केंद्रित किया जा सकता है, और उसके बाद का उपयोग कर :focus-withinपर label: माता-पिता jsbin.com/fokexoc/2/edit?html,css,output
इन चरणों का पालन करें फिर आप अपनी फ़ाइल अपलोड फ़ॉर्म के लिए कस्टम शैलियाँ बना सकते हैं:
यह सरल HTML फॉर्म है (कृपया नीचे लिखे HTML टिप्पणियों को पढ़ें)
<form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> <!-- this is your file input tag, so i hide it!--> <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <input type="submit" value='submit' > </form>फिर इनपुट टैग फाइल करने के लिए क्लिक इवेंट पास करने के लिए इस सरल स्क्रिप्ट का उपयोग करें।
function getFile(){ document.getElementById("upfile").click(); }अब आप बिना किसी चिंता के किसी भी प्रकार की स्टाइलिंग का उपयोग कर सकते हैं।
मैं यह अच्छी तरह से जानता हूं क्योंकि मैं डेढ़ महीने से डिफ़ॉल्ट शैलियों को बदलने की कोशिश कर रहा हूं। मेरा विश्वास करो, यह बहुत कठिन है क्योंकि विभिन्न ब्राउज़रों के अलग-अलग अपलोड इनपुट टैग हैं। तो अपने कस्टम फ़ाइल अपलोड फ़ॉर्म बनाने के लिए इसका उपयोग करें। यहाँ पूर्ण स्वचालित UPLOAD कोड है।
function getFile() {
document.getElementById("upfile").click();
}
function sub(obj) {
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length - 1];
document.myForm.submit();
event.preventDefault();
}#yourBtn {
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor: pointer;
}<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)" /></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>इसे सीएसएस के साथ छिपाएं और ब्राउज़ बटन को सक्रिय करने के लिए $ (चयनकर्ता) .click () के साथ एक कस्टम बटन का उपयोग करें। फिर फ़ाइल इनपुट प्रकार के मान की जांच करने के लिए एक अंतराल सेट करें। अंतराल उपयोगकर्ता के लिए मूल्य प्रदर्शित कर सकता है ताकि उपयोगकर्ता देख सके कि क्या अपलोड हो रहा है। जब फॉर्म जमा हो जाएगा तो अंतराल साफ हो जाएगा [EDIT] माफ करना, मैं बहुत व्यस्त था, इस पोस्ट को अपडेट करने का मतलब था, यहाँ एक उदाहरण है
<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
<!-- filename to display to the user -->
<p id="file-name" class="margin-10 bold-10"></p>
<!-- Hide this from the users view with css display:none; -->
<input class="display-none" id="file-type" type="file" size="4" name="file"/>
<!-- Style this button with type image or css whatever you wish -->
<input id="browse-click" type="button" class="button" value="Browse for files"/>
<!-- submit button -->
<input type="submit" class="button" value="Change"/>
</div>$(window).load(function () {
var intervalFunc = function () {
$('#file-name').html($('#file-type').val());
};
$('#browse-click').on('click', function () { // use .live() for older versions of jQuery
$('#file-type').click();
setInterval(intervalFunc, 1);
return false;
});
});एचटीएमएल
<div class="new_Btn">SelectPicture</div><br>
<input id="html_btn" type='file'" /><br>सीएसएस
.new_Btn {
// your css propterties
}
#html_btn {
display:none;
}jQuery
$('.new_Btn').bind("click" , function () {
$('#html_btn').click();
});
//edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQueryफिडल : http://jsfiddle.net/M7BXC/
आप सामान्य जावास्क्रिप्ट के साथ jQuery के बिना भी अपने लक्ष्यों तक पहुँच सकते हैं।
अब newBtn html_btn के साथ लिंक है और आप अपने नए btn को स्टाइल कर सकते हैं जैसे आप चाहते हैं - D
सभी रेंडरिंग इंजन स्वचालित रूप से एक बटन बनाते हैं जब एक <input type="file">बनाया जाता है। ऐतिहासिक रूप से, वह बटन पूरी तरह से अन-स्टाइल योग्य है। हालांकि, ट्रिडेंट और वेबकीट ने छद्म तत्वों के माध्यम से हुक जोड़े हैं।
ट्राइडेंट
IE10 के रूप में, फ़ाइल इनपुट बटन को ::-ms-browseछद्म तत्व का उपयोग करके स्टाइल किया जा सकता है । मूल रूप से, किसी भी सीएसएस नियम जो आप एक नियमित बटन पर लागू करते हैं, छद्म तत्व पर लागू किया जा सकता है। उदाहरण के लिए:
::-ms-browse {
background: black;
color: red;
padding: 1em;
}<input type="file">यह विंडोज 8 पर IE10 में निम्नानुसार प्रदर्शित करता है:
वेबकिट
WebKit अपने फ़ाइल इनपुट बटन के लिए एक ::-webkit-file-upload-buttonछद्म तत्व के साथ एक हुक प्रदान करता है । फिर, बहुत ज्यादा किसी भी सीएसएस नियम को लागू किया जा सकता है, इसलिए ट्रिडेंट उदाहरण यहां भी काम करेगा:
::-webkit-file-upload-button {
background: black;
color: red;
padding: 1em;
}<input type="file">यह OS X पर Chrome 26 में निम्नानुसार प्रदर्शित होता है:
यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं, तो यह मेरे लिए काम कर रहा है:
देखें http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<span class="btn btn-primary btn-file">
Browse...<input type="file">
</span>जो निम्न फ़ाइल इनपुट बटन का उत्पादन करता है:
गंभीरता से, http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ देखें
देशी ड्रैग और ड्रॉप सपोर्ट के साथ यहां काम करने का उदाहरण: https://jsfiddle.net/j40xvkb3/
फ़ाइल इनपुट को स्टाइल करते समय, आपको इनपुट प्रदान करने वाली किसी भी मूल सहभागिता को नहीं तोड़ना चाहिए ।
display: noneदृष्टिकोण देशी खींचें और ड्रॉप समर्थन टूट जाता है।
कुछ भी नहीं तोड़ने के लिए, आपको इसका उपयोग करना चाहिए opacity: 0 इनपुट के लिए दृष्टिकोण का , और एक आवरण में रिश्तेदार / निरपेक्ष पैटर्न का उपयोग करके इसे स्थिति में लाना चाहिए।
इस तकनीक का उपयोग करते हुए, आप आसानी से उपयोगकर्ता के लिए एक क्लिक / ड्रॉप ज़ोन स्टाइल कर सकते हैं, और dragenterशैलियों को अपडेट करने के लिए इवेंट में जावास्क्रिप्ट में कस्टम वर्ग जोड़ सकते हैं और उपयोगकर्ता को एक फीडबैक दे सकते हैं कि वह यह देख सके कि वह एक फ़ाइल ड्रॉप कर सकता है।
HTML:
<label for="test">
<div>Click or drop something here</div>
<input type="file" id="test">
</label>सीएसएस:
input[type="file"] {
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
}
div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
border: 3px dotted #bebebe;
border-radius: 10px;
}
label {
display: inline-block;
position: relative;
height: 100px;
width: 400px;
}यहां एक काम करने का उदाहरण है (अतिरिक्त जेएस के साथ dragoverघटना और गिराए गए फ़ाइलों को संभालने के लिए )।
https://jsfiddle.net/j40xvkb3/
उम्मीद है कि इस मदद की!
मैं नीचे कोड का उपयोग करके शुद्ध सीएसएस के साथ करने में सक्षम हूं । मैंने बूटस्ट्रैप और फ़ॉन्ट-भयानक का उपयोग किया है।
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<label class="btn btn-default btn-sm center-block btn-file">
<i class="fa fa-upload fa-2x" aria-hidden="true"></i>
<input type="file" style="display: none;">
</label> <label>
<input type="file" />
</label>आप इनपुट के लिए अपने इनपुट प्रकार = "फ़ाइल" को एक लेबल के अंदर लपेट सकते हैं। लेबल को स्टाइल करें जो आप चाहें और इनपुट को डिस्प्ले के साथ छिपाएँ: कोई नहीं;
यहां एक समाधान है जो वास्तव में <input type="file" />तत्व को स्टाइल नहीं करता है, बल्कि <input type="file" />अन्य तत्वों के शीर्ष पर एक तत्व का उपयोग करता है (जिसे स्टाइल किया जा सकता है)। <input type="file" />तत्व इसलिए वास्तव में दिखाई नहीं देता है, कुल मिलाकर भ्रम एक अच्छी तरह से स्टाइल फ़ाइल अपलोड नियंत्रण की है।
मैं हाल ही में इस समस्या में आया था और स्टैक ओवरफ्लो पर जवाबों की अधिकता के बावजूद, कोई भी वास्तव में बिल को फिट नहीं कर रहा था। अंत में, मैंने इसे सरल और सुरुचिपूर्ण समाधान के रूप में अनुकूलित किया।
मैंने फ़ायरफ़ॉक्स, IE (11, 10 और 9), क्रोम और ओपेरा, आईपैड और कुछ एंड्रॉइड डिवाइस पर भी इसका परीक्षण किया है।
यहाँ JSFiddle लिंक है -> http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) {
$in = $(this);
$in.next().html($in.val());
});
$('.uploadButton').click(function() {
var fileName = $("#fileUpload").val();
if (fileName) {
alert(fileName + " can be uploaded.");
}
else {
alert("Please select a file to upload");
}
});body {
background-color:Black;
}
div.upload {
background-color:#fff;
border: 1px solid #ddd;
border-radius:5px;
display:inline-block;
height: 30px;
padding:3px 40px 3px 3px;
position:relative;
width: auto;
}
div.upload:hover {
opacity:0.95;
}
div.upload input[type="file"] {
display: input-block;
width: 100%;
height: 30px;
opacity: 0;
cursor:pointer;
position:absolute;
left:0;
}
.uploadButton {
background-color: #425F9C;
border: none;
border-radius: 3px;
color: #FFF;
cursor:pointer;
display: inline-block;
height: 30px;
margin-right:15px;
width: auto;
padding:0 20px;
box-sizing: content-box;
}
.fileName {
font-family: Arial;
font-size:14px;
}
.upload + .uploadButton {
height:38px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="button" class="uploadButton" value="Browse" />
<input type="file" name="upload" accept="image/*" id="fileUpload" />
<span class="fileName">Select file..</span>
</div>
<input type="button" class="uploadButton" value="Upload File" />
</form>उम्मीद है की यह मदद करेगा!!!
यह jquery के साथ सरल है। रेयान का एक कोड उदाहरण देने के लिएएक मामूली संशोधन के साथ के सुझाव ।
मूल HTML:
<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">जब आप तैयार हों तब इनपुट पर स्टाइल सेट करना सुनिश्चित करें: opacity: 0
आप सेट नहीं कर सकतेdisplay: none क्योंकि इसे क्लिक करने की आवश्यकता है। लेकिन आप इसे "नया" बटन के नीचे रख सकते हैं या यदि आप चाहें तो z- इंडेक्स के साथ कुछ और के तहत टक कर सकते हैं।
छवि पर क्लिक करने पर वास्तविक इनपुट पर क्लिक करने के लिए कुछ jquery को सेट करें।
$('#image_icon').click(function() {
$('#the_real_file_input').click();
});अब आपका बटन काम कर रहा है। बदले जाने पर मूल्य को काटें और चिपकाएँ।
$('input[type=file]').bind('change', function() {
var str = "";
str = $(this).val();
$("#filename").text(str);
}).change();टाह डाह! आपको कुछ अधिक सार्थक करने के लिए घाटी () को पार्स करने की आवश्यकता हो सकती है लेकिन आपको सभी सेट होना चाहिए।
अपलोड फ़ाइल बटन को अपने अच्छे बटन या तत्व पर रखें और इसे छिपाएं।
बहुत ही सरल और किसी भी ब्राउज़र पर काम करेगा
<div class="upload-wrap">
<button type="button" class="nice-button">upload_file</button>
<input type="file" name="file" class="upload-btn">
</div>शैलियाँ
.upload-wrap {
position: relative;
}
.upload-btn {
position: absolute;
left: 0;
opacity: 0;
}दृश्यता: छिपा हुआ TRICK
मैं आमतौर पर visibility:hiddenचाल के लिए जाता हूं
यह मेरा स्टाइल बटन है
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>यह इनपुट प्रकार = फ़ाइल बटन है। visibility:hiddenनियम नोट करें
<input type="file" id="upload" style="visibility:hidden;">यह उन्हें एक साथ गोंद करने के लिए जावास्क्रिप्ट बिट है। यह काम करता हैं
<script>
$('#uploadbutton').click(function(){
$('input[type=file]').click();
});
</script>style="visibility:hidden"बहुत लंबा है, बस उपयोग करें hidden। इसके अलावा, click()किसी भी ब्राउज़र के लिए काम करता है और अब तक किसी भी तरह की सुरक्षा का कोई कारण नहीं है और किसी भी डिवाइस पर यह वैध तरीका है और @ jianluca क्लासिक jQuery के उपयोग के लिएtrigger()
एक ही तरीका है जिसके बारे में मैं यह जान सकता हूँ कि जावास्क्रिप्ट के साथ बटन को खोजने के बाद यह रेंडर हो जाता है और इसे एक स्टाइल असाइन करता है
आप इस राइटअप को भी देख सकते हैं
<input type="file" name="media" style="display-none" onchange="document.media.submit()">मैं आम तौर पर फ़ाइल इनपुट टैग को अनुकूलित करने के लिए सरल जावास्क्रिप्ट का उपयोग करता हूं। छिपे हुए इनपुट फ़ील्ड, बटन के क्लिक पर, जावास्क्रिप्ट छिपे हुए फ़ील्ड को कॉल करता है, किसी सीएसएस या जक्वेरी के गुच्छा के साथ सरल समाधान।
<button id="file" onclick="$('#file').click()">Upload File</button>click()इनपुट प्रकार फ़ाइल के लिए ईवेंट को फायर करने के लिए विधि का उपयोग नहीं कर सकते । अधिकांश ब्राउज़र सुरक्षा कारणों से अनुमति नहीं देते हैं।
यहां हम टाइप फ़ाइल के इनपुट को ट्रिगर करने के लिए एक स्पैन का उपयोग करते हैं और हम बस उस स्पैन को कस्टमाइज़ करते हैं , इसलिए हम इस तरह से किसी भी स्टाइल को जोड़ सकते हैं।
ध्यान दें कि हम दृश्यता के साथ इनपुट टैग का उपयोग करते हैं: छिपा हुआ विकल्प और इसे स्पैन में ट्रिगर करें।
.attachFileSpan{
color:#2b6dad;
cursor:pointer;
}
.attachFileSpan:hover{
text-decoration: underline;
}<h3> Customized input of type file </h3>
<input id="myInput" type="file" style="visibility:hidden"/>
<span title="attach file" class="attachFileSpan" onclick="document.getElementById('myInput').click()">
Attach file
</span>यह सामग्री / कोणीय फ़ाइल अपलोड के साथ करने का एक अच्छा तरीका है। आप बूटस्ट्रैप बटन के साथ भी ऐसा कर सकते हैं।
ध्यान दें कि <a>इसके बजाय मैंने उपयोग किया <button>था क्लिक इवेंट्स को बबल करने की अनुमति देता है।
<label>
<input type="file" (change)="setFile($event)" style="display:none" />
<a mat-raised-button color="primary">
<mat-icon>file_upload</mat-icon>
Upload Document
</a>
</label>केवल सीएसएस
यह बहुत ही सरल और आसान उपयोग करें
एचटीएमएल:
<label>Attach your screenshort</label>
<input type="file" multiple class="choose">सीएसएस:
.choose::-webkit-file-upload-button {
color: white;
display: inline-block;
background: #1CB6E0;
border: none;
padding: 7px 15px;
font-weight: 700;
border-radius: 3px;
white-space: nowrap;
cursor: pointer;
font-size: 10pt;
}हो सकता है बहुत सारे आवारा लोग। लेकिन मैं इस तरह से शुद्ध सीएसएस में एफए-बटनों को पसंद करता हूं:
.divs {
position: relative;
display: inline-block;
background-color: #fcc;
}
.inputs {
position:absolute;
left: 0px;
height: 100%;
width: 100%;
opacity: 0;
background: #00f;
z-index:999;
}
.icons {
position:relative;
}<div class="divs">
<input type='file' id='image' class="inputs">
<i class="fa fa-image fa-2x icons"></i>
</div>
<div class="divs">
<input type='file' id='book' class="inputs">
<i class="fa fa-book fa-5x icons"></i>
</div>
<br><br><br>
<div class="divs">
<input type='file' id='data' class="inputs">
<i class="fa fa-id-card fa-3x icons"></i>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>"महान" सीएसएस-केवल समाधानों से मूर्ख मत बनो जो वास्तव में बहुत ब्राउज़र-विशिष्ट हैं, या जो वास्तविक बटन के शीर्ष पर स्टाइल बटन को ओवरले करते हैं, या जो आपको <label>इसके बजाय उपयोग करने के लिए मजबूर करते हैं<button> , या किसी अन्य हैक । सामान्य उपयोग के लिए इसे प्राप्त करने के लिए जावास्क्रिप्ट आवश्यक है। अगर आप मुझ पर विश्वास नहीं करते हैं तो कृपया अध्ययन करें कि gmail और DropZone कैसे करते हैं।
बस एक सामान्य बटन को स्टाइल करें जो आप चाहते हैं, फिर अपने स्टाइल बटन के लिए एक छिपे हुए इनपुट तत्व को बनाने और लिंक करने के लिए एक साधारण जेएस फ़ंक्शन को कॉल करें।
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>ध्यान दें कि उपयोगकर्ता द्वारा किसी फ़ाइल को चुनने के बाद हर बार उपरोक्त कोड इसे कैसे लिंक करता है। यह महत्वपूर्ण है क्योंकि "onchange" केवल तभी कहा जाता है जब उपयोगकर्ता फ़ाइल नाम बदलता है। लेकिन आप शायद हर बार उपयोगकर्ता द्वारा प्रदान की गई फ़ाइल को प्राप्त करना चाहते हैं।
labelदृष्टिकोण काम करता है, सिवाय इसके कि चयनित फ़ाइल नाम या पथ नहीं दिखा सकता है। इसलिए आवश्यक रूप से, यह एकमात्र मुद्दा है जिसे हल करने के लिए जेएस की आवश्यकता है।
परिवर्तित फ़ाइल नाम के साथ एकाधिक फ़ाइल समाधान
बूटस्ट्रैप उदाहरण
HTML:
<div>
<label class="btn btn-primary search-file-btn">
<input name="file1" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>
<div>
<label class="btn btn-primary search-file-btn">
<input name="file2" type="file" style="display:None;"> <span>Choose file</span>
</label>
<span>No file selected</span>
</div>1. jQuery के साथ जेएस:
$().ready(function($){
$('.search-file-btn').children("input").bind('change', function() {
var fileName = '';
fileName = $(this).val().split("\\").slice(-1)[0];
$(this).parent().next("span").html(fileName);
})
});2. jQuery के बिना JS
Array.prototype.forEach.call(document.getElementsByTagName('input'), function(item) {
item.addEventListener("change", function() {
var fileName = '';
fileName = this.value.split("\\").slice(-1)[0];
this.parentNode.nextElementSibling.innerHTML = fileName;
});
});यहाँ एक समाधान है, जो चुने हुए फ़ाइल नाम को भी दिखाता है: http://jsfiddle.net/raft9pg0/1/
HTML:
<label for="file-upload" class="custom-file-upload">Chose file</label>
<input id="file-upload" type="file"/>
File: <span id="file-upload-value">-</span>जे एस:
$(function() {
$("input:file[id=file-upload]").change(function() {
$("#file-upload-value").html( $(this).val() );
});
});सीएसएस:
input[type="file"] {
display: none;
}
.custom-file-upload {
background: #ddd;
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
padding: 8px 10px; }fakepathपथ नहीं ?
इस सप्ताह मुझे बटन को कस्टम करने और चयनित फ़ाइल नाम को एक तरफ प्रदर्शित करने की आवश्यकता थी, इसलिए ऊपर दिए गए कुछ उत्तर पढ़ने के बाद (धन्यवाद BTW) मैं निम्नलिखित कार्यान्वयन के साथ आया:
HTML:
<div class="browse">
<label id="uploadBtn" class="custom-file-upload">Choose file
<input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" />
</label>
<span>{{fileName}}</span>
</div>सीएसएस
input[type='file'] {
color: #a1bbd5;
display: none;
}
.custom-file-upload {
border: 1px solid #a1bbd5;
display: inline-block;
padding: 2px 8px;
cursor: pointer;
}
label{
color: #a1bbd5;
border-radius: 3px;
}जावास्क्रिप्ट (कोणीय)
app.controller('MainCtrl', function($scope) {
$scope.fileName = 'No file chosen';
$scope.onFileSelect = function ($files) {
$scope.selectedFile = $files;
$scope.fileName = $files[0].name;
};
});मूल रूप से मैं एनजी-फाइल-अपलोड लिब के साथ काम कर रहा हूं, कोणीय-वार मैं फाइलनाम को अपने $ दायरे में बांध रहा हूं और इसे 'कोई फ़ाइल नहीं चुना गया' का प्रारंभिक मूल्य दे रहा हूं, मैं onFileSelect () फ़ंक्शन को भी बाध्य कर रहा हूं जब कोई फ़ाइल चयनित हो जाती है तो मेरा स्कोप इसलिए मैं एनजी-अपलोड एपीआई का उपयोग करके फ़ाइल नाम प्राप्त कर रहा हूं और इसे $ स्कोप के रूप में असाइन करता हूं। फ़िलनेम।
स्टाइल पर क्लिक करने पर फ़ंक्शन <input>का उपयोग करके बस एक क्लिक पर अनुकरण करें । मैं एक से बाहर अपने खुद के बटन बनाया और फिर पर एक क्लिक ट्रिगर जब मेरे पर क्लिक । यह आपको अपना बटन बनाने की अनुमति देता है, हालांकि आप चाहते हैं क्योंकि यह एक है और आपकी फ़ाइल पर एक क्लिक का अनुकरण करता है । फिर अपने पर प्रयोग करें ।trigger()<div><div>input<div><div><input>display: none<input>
// div styled as my load file button
<div id="simClick">Load from backup</div>
<input type="file" id="readFile" />
// Click function for input
$("#readFile").click(function() {
readFile();
});
// Simulate click on the input when clicking div
$("#simClick").click(function() {
$("#readFile").trigger("click");
});सबसे अच्छा तरीका छद्म तत्व का उपयोग कर रहा है: के बाद या: एक तत्व के रूप में डी इनपुट से पहले। फिर अपनी इच्छानुसार उस छद्म तत्व को स्टाइल करें। मैं आपको निम्नलिखित के रूप में सभी इनपुट फ़ाइलों के लिए एक सामान्य शैली के रूप में करने के लिए पुनः सम्मिलित करता हूं:
input {
height: 0px;
outline: none;
}
input[type="file"]:before {
content: "Browse";
background: #fff;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #e0e0e0;
top: -1px;
line-height: 35px;
color: #b6b6b6;
padding-left: 5px;
display: block;
}सबसे अच्छा तरीका है जो मैंने पाया है कि input type: fileफिर इसे स्थापित करना है display: none। दे दो ए id। एक बटन या कोई अन्य तत्व बनाएं जिसे आप फ़ाइल इनपुट खोलना चाहते हैं।
फिर उस पर एक ईवेंट श्रोता जोड़ें (बटन) जो क्लिक किए जाने पर मूल फ़ाइल इनपुट पर एक क्लिक का अनुकरण करता है। जैसे हैलो नाम का बटन क्लिक करना लेकिन यह एक फाइल विंडो खोलता है।
उदाहरण कोड
//i am using semantic ui
<button class="ui circular icon button purple send-button" id="send-btn">
<i class="paper plane icon"></i>
</button>
<input type="file" id="file" class="input-file" />जावास्क्रिप्ट
var attachButton=document.querySelector('.attach-button');
attachButton.addEventListener('click', e=>{
$('#file').trigger("click")
})css यहाँ बहुत कुछ कर सकता है ... थोड़ी सी चालाकी के साथ ...
<div id='wrapper'>
<input type='file' id='browse'>
</div>
#wrapper {
width: 93px; /*play with this value */
height: 28px; /*play with this value */
background: url('browseBtn.png') 0 0 no-repeat;
border:none;
overflow:hidden;
}
#browse{
margin-left:-145px; /*play with this value */
opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}:: संदर्भ :: http://site-o-matic.net/?viewpost=19
-बौद्ध मठ
मैंने फ़ाइल बटन को चित्र में बदलने के लिए एक बहुत ही आसान तरीका खोजा है। आप बस एक तस्वीर को लेबल करते हैं और इसे फ़ाइल बटन के शीर्ष पर रखते हैं।
<html>
<div id="File button">
<div style="position:absolute;">
<!--This is your labeled image-->
<label for="fileButton"><img src="ImageURL"></label>
</div>
<div>
<input type="file" id="fileButton"/>
</div>
</div>
</html>लेबल की गई छवि पर क्लिक करने पर, आप फ़ाइल बटन का चयन करें।
केवल यह दृष्टिकोण आपको संपूर्ण लचीलापन देता है! ईएस 6 / वेनिलाजेएस!
एचटीएमएल:
<input type="file" style="display:none;"></input>
<button>Upload file</button>जावास्क्रिप्ट:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('input[type="file"]').click();
});यह इनपुट-फ़ाइल बटन को छुपाता है, लेकिन हुड के नीचे इसे दूसरे सामान्य बटन से क्लिक करता है, जिससे आप स्पष्ट रूप से किसी अन्य बटन की तरह स्टाइल कर सकते हैं। यह एक एकमात्र समाधान है जिसमें बिना बेकार के डोम-नोड से अलग नहीं है। के लिए धन्यवाद display:none;, इनपुट-बटन डोम में किसी भी दृश्य स्थान को आरक्षित नहीं करता है।
(इसके लिए प्रॉप्स देने के लिए मुझे अब और नहीं पता है। लेकिन मुझे स्टैकओवरफ्लो पर यह विचार कहीं से मिला है।)