छवि अपलोड के लिए फ़ाइल बटन को कस्टमाइज़ करें

मुझे अपलोड छवि फ़ाइलों के लिए एक बटन रखा गया है। मैं उस बटन को कस्टमाइज़ करना चाहता हूं, मैं एक से अधिक छवि फ़ाइल जोड़ना चाहता हूं, एन्चिव के लिए तर्क क्या है।छवि अपलोड के लिए फ़ाइल बटन को कस्टमाइज़ करें

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

यह संभव अनुकूलित करने के लिए पाठ "no files choosen" नीचे choose button.Meanwile मैं बुद्धिमान एक कैमरा छवि no files choosen पाठ से पहले रखने के लिए है।

मेरी साइट को बेहतर बनाने के लिए इसे कैसे करें।

धन्यवाद

स्रोत

2013-04-18 Anonymous

समान पद http://stackoverflow.com/questions/6461252/custom-upload-button – zavg

आप से इनपुट छिपा कर सकते हैं इसे एक div में रखकर जो 01 हैऔर overwflow:hidden। जब आप एक बटन या एक अन्य एचटीएमएल तत्व जोड़ते हैं जिसे आप चाहें शैली बना सकते हैं। onclick घटना में आप जावास्क्रिप्ट या jQuery का उपयोग कर इनपुट क्षेत्र हो और उस पर क्लिक करें:

<div style="height:0px;overflow:hidden"> 
    <input type="file" id="fileInput" name="fileInput" /> 
</div> 
<button type="button" onclick="chooseFile();">choose file</button> 

<script> 
    function chooseFile() { 
     $("#fileInput").click(); 
    } 
</script>

अब इनपुट छिपा हुआ है, लेकिन आप बटन शैली दे सकते हैं के रूप में आप चाहते हैं, यह हमेशा क्लिक पर फ़ाइल इनपुट खुल जाएगा।

आप jQuery इस स्क्रिप्ट टैग के साथ स्क्रिप्ट टैग की जगह का उपयोग नहीं करना चाहते हैं:

<script> 
    function chooseFile() { 
     document.getElementById("fileInput").click(); 
    } 
</script>

स्रोत

2013-04-18 10:48:50

हाय महोदय, मैंने इसे jsfiddle के साथ चेक किया है, यह इनपुट फ़ाइल नहीं ले रहा है। फ़ाइल फ़ाइल को कोई भी काम नहीं कर रहा है –

हां, क्योंकि आपको वें लिंक जोड़ना है ई jQuery जेएस-फाइलें। –

और आपको जावास्क्रिप्ट को HTML पैनल में एक स्क्रिप्ट टैग में रखना होगा, लेकिन मुझे नहीं पता कि क्यों ... इसे w3schools से संपादक को आज़माएं, यह ठीक है। –

इस कुशल समाधान का प्रयास करें। (मैं आज इसे करने की कोशिश अपने प्रोजेक्ट :) में से एक के लिए)

एचटीएमएल

<div class="choose_file"> 
     <span>Choose File</span> 
     <input name="Select File" type="file" /> 
    </div>

सीएसएस

.choose_file{ 
    position:relative; 
    display:inline-block;  
    border-radius:8px; 
    border:#ebebeb solid 1px; 
    width:250px; 
    padding: 4px 6px 4px 8px; 
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif; 
    color: #7f7f7f; 
    margin-top: 2px; 
    background:white 
} 
.choose_file input[type="file"]{ 
    -webkit-appearance:none; 
    position:absolute; 
    top:0; left:0; 
    opacity:0; 
}

DEMO

स्रोत

2013-04-18 10:37:41 Sowmya

यह चयनित फ़ाइल प्रदर्शित नहीं करता है नाम – msa7

आप इसे केवल सीएसएस का उपयोग कर अनुकूलित कर सकते हैं। नीचे दिए गए लिंक के माध्यम से जाओ।

एचटीएमएल

<label class="btn-upload"> 
    <input type="file" name="fileupload"> 
    <button class="btn">Browse</button> 
</label> 

.btn-upload { 
    position: relative; 
    overflow: hidden; 
    display: inline-block; 
} 
.btn-upload input[type=file] { 
    position: absolute; 
    opacity: 0; 
    z-index: 0; 
    max-width: 100%; 
    height: 100%; 
    display: block; 
} 
.btn-upload .btn{ 
    padding: 8px 20px; 
    background: #337ab7; 
    border: 1px solid #2e6da4; 
    color: #fff; 
    border: 0; 
} 
.btn-upload:hover .btn{ 
    padding: 8px 20px; 
    background: #2e6da4; 
    color: #fff; 
    border: 0; 
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

स्रोत

2015-08-15 19:29:43

<body> 

    <style> 
    .image{ 
    position:relative; 
    display:inline-block;  
    width:3%; 
    padding: 0%; 
    } 
.image input[type="file"]{ 
-webkit-appearance:none; 
position:absolute; 
    top:0; left:0; 
    opacity:0; 
    } 
    </style> 

    <div class="image"> 
    <span><img src='admin/ico/fms.ico' class "image"></span> 
    <input name="image" type="file" /> 
    </div> 
</body>

स्रोत

2017-02-12 15:46:40

कृपया कुछ पाठ जोड़ें _how_ यह प्रश्न का उत्तर देता है। – Zeta

जब आप किसी छवि को अपलोड बटन के रूप में उपयोग करना चाहते हैं तो यह कोड बेहतर काम करता है। बस अपनी छवि को अपने साथ बदलें और यह –

काम करेगा कृपया आपके उत्तर में अतिरिक्त जानकारी संपादित करें। टिप्पणियां हटा दी जा सकती हैं, और उनकी सामग्री खो सकती है। – Zeta

छवि अपलोड के लिए फ़ाइल बटन को कस्टमाइज़ करें

उत्तर

संबंधित मुद्दे