क्या <input type=file />पाठ फ़ील्ड के बिना केवल "ब्राउज़ करें" बटन दिखाई देने के लिए शैली (या स्क्रिप्ट) तत्व है?
धन्यवाद
संपादित करें : सिर्फ यह स्पष्ट करने के लिए कि मुझे इसकी आवश्यकता क्यों है। मैं http://www.morningz.com/?p=5 से मल्टी फाइल अपलोड कोड का उपयोग कर रहा हूं और इसे इनपुट टेक्स्ट फील्ड की आवश्यकता नहीं है क्योंकि इसका कभी मूल्य नहीं है। स्क्रिप्ट सिर्फ पेज पर संग्रह करने के लिए नई चयनित फ़ाइल जोड़ता है। यह पाठ क्षेत्र के बिना बहुत बेहतर लगेगा, यदि यह संभव है।
जवाबों:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />यह निश्चित रूप से काम करेगा मैं इसे अपनी परियोजनाओं में इस्तेमाल किया है। मुझे आशा है कि यह मदद करता है :)
मैं इसे पूरा करने की कोशिश कर रहा एक समय की एक बिल्ली थी। मैं एक फ्लैश समाधान का उपयोग नहीं करना चाहता था, और मैंने जिन jQuery पुस्तकालयों को देखा, उनमें से कोई भी सभी ब्राउज़रों में विश्वसनीय नहीं था।
मैं अपने स्वयं के समाधान के साथ आया था, जो सीएसएस में पूरी तरह से लागू किया गया है (बटन पर क्लिक करने के लिए ऑनक्लिक शैली परिवर्तन को छोड़कर 'क्लिक')।
आप यहां एक काम करने के उदाहरण की कोशिश कर सकते हैं: http://jsfiddle.net/VQJ9V/307/ (FF 7, IE 9, सफारी 5, ओपेरा 11 और क्रोम 14 में परीक्षण)
यह एक बड़ा फ़ाइल इनपुट (फ़ॉन्ट-आकार: 50 पीएक्स के साथ) बनाकर काम करता है, फिर इसे एक ऐसे डिव में लपेटता है जिसमें एक निश्चित आकार और अतिप्रवाह होता है: छिपा हुआ। इनपुट तो केवल इस "विंडो" div के माध्यम से दिखाई देता है। Div को एक पृष्ठभूमि छवि या रंग दिया जा सकता है, पाठ जोड़ा जा सकता है, और div पृष्ठभूमि को प्रकट करने के लिए इनपुट को पारदर्शी बनाया जा सकता है:
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>सीएसएस:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}मुझे बताएं कि क्या इसमें कोई समस्या है और मैं उन्हें ठीक करने की कोशिश करूंगा।
मैंने आज अपना दिन बर्बाद कर दिया है। मुझे ऐसा कोई हल नहीं मिला, जिसमें मेरे प्रत्येक परिदृश्य पर काम किया गया हो।
तब मुझे याद आया कि मैंने टेक्स्ट बॉक्स के बिना JQuery फ़ाइल अपलोड के लिए एक उदाहरण देखा । इसलिए मैंने जो किया वह यह है कि मैंने उनका उदाहरण लिया और इसे संबंधित हिस्से तक ले गया।
यह समाधान कम से कम IE और FF के लिए काम करता है और इसे पूरी तरह से स्टाइल किया जा सकता है। नीचे दिए गए उदाहरण में फ़ाइल इनपुट फैंसी "फाइलें जोड़ें" बटन के नीचे छिपा हुआ है।
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>इनपुट-फ़ाइल तत्व छिपाएँ और एक दृश्य बटन बनाएँ जो उस इनपुट-फ़ाइल के क्लिक इवेंट को ट्रिगर करेगा।
इसे इस्तेमाल करे:
सीएसएस
#file { width:0; height:0; } HTML:
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>JavaScript (jQuery):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});सीएसएस के साथ इनपुट फ़ाइल टैग छिपाएं, एक लेबल जोड़ें और इसे इनपुट बटन पर असाइन करें। लेबल क्लिक करने योग्य होगा और जब क्लिक किया जाता है, तो यह फ़ाइल संवाद को आग देगा।
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>शैली को बटन के रूप में लेबल में जोड़ें।
लाइव डेमो
onchangeके inputलिए एक हैंडलर भी जोड़ूंगा ।
जो बहुत कठिन होने वाला है। फ़ाइल इनपुट प्रकार के साथ समस्या यह है कि इसमें आमतौर पर दो दृश्य तत्व होते हैं, जबकि एक ही DOM-element माना जाता है। इसमें जोड़ें कि फ़ाइल इनपुट के लिए कई ब्राउज़रों का अपना अलग रूप और अनुभव है, और आप बुरे सपने के लिए तैयार हैं। Quirksmode.org पर इस लेख को देखें कि फ़ाइल इनपुट के पास quirks है। मैं आपको गारंटी देता हूं कि यह आपको खुश नहीं करेगा (मैं अनुभव से बोलता हूं)।
[संपादित करें]
वास्तव में, मुझे लगता है कि आप अपने इनपुट को कंटेनर तत्व (डिव की तरह) में डालने के साथ दूर हो सकते हैं, और तत्व में एक नकारात्मक मार्जिन जोड़ सकते हैं। प्रभावी ढंग से स्क्रीन से टेक्स्टबॉक्स भाग को छिपाते हुए। एक अन्य विकल्प यह होगा कि मैं जिस लेख में जुड़ा हुआ हूं, उसमें तकनीक का उपयोग करके उसे बटन की तरह स्टाइल करने की कोशिश की जाए।
सुरक्षित सभी ब्राउज़रों में काम करने के लिए ठीक करें:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>मैंने एफएफ, क्रोम और आईई में परीक्षण किया है - ठीक काम कर रहा है, लागू शैलियों भी: डी
मैंने शीर्ष दो समाधानों को लागू करने की कोशिश की, और यह मेरे लिए बहुत बड़ा समय बर्बाद हो गया। अंत में, इस .css वर्ग को लागू करने से समस्या हल हो गई ...
input[type='file'] {
color: transparent;
}किया हुआ! सुपर क्लीन और सुपर सिंपल ...
ऐसा करने का एक और आसान तरीका। Html में एक "input type file" टैग बनाएं और इसे छिपाएँ। फिर एक बटन पर क्लिक करें और इसे जरूरत के अनुसार प्रारूपित करें। इसके बाद javascript / jquery का उपयोग प्रोग्रामेटिक रूप से इनपुट टैग पर क्लिक करें जब बटन पर क्लिक किया जाता है।
HTML: -
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>जावास्क्रिप्ट: -
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});jQuery: -
$('#button').click(function(){
$('#file').click();
});सीएसएस: -
#button
{
background-color: blue;
color: white;
}यहाँ एक ही काम कर रहे जेएस फिडेल है: - http://jsfiddle.net/32na3/
मैंने ऊपर सुझाए गए कुछ कोड का उपयोग किया और अपने समय का इंतजार करने के कई घंटों के बाद, मैं अंततः एक सीएसएस बैग मुक्त समाधान के लिए आया।
आप इसे यहाँ पर चला सकते हैं - http://jsfiddle.net/WqGph/
लेकिन फिर एक बेहतर समाधान मिला - http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>onchangeछिपे हुए inputतत्व के लिए घटना को ट्रिगर नहीं किया गया है।
आप किसी छवि को लेबल कर सकते हैं, जब आप उस पर क्लिक करते हैं तो बटन की क्लिक घटना चालू हो जाएगी। आप बस सामान्य बटन को अदृश्य बना सकते हैं:
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>यह मेरे लिए सभी ब्राउज़रों पर काम करता है, और इसका उपयोग करना बहुत आसान है।
आप इस तरह एक छिपा फ़ाइल इनपुट पर क्लिक घटना भेज सकते हैं:
<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;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>var ev = document.createEvent('HTMLEvents'); HTMLEvents को माउसइवेंट में बदलेंvar ev = document.createEvent('MouseEvents');
Ive इस के साथ एक बहुत hacky समाधान ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />समस्या चौड़ाई विशेषता है जो पाठ क्षेत्र को छिपा रही है, ब्राउज़र के बीच अलग-अलग अलग-अलग होगी, विंडोज एक्सपी थीम और इसी तरह अलग-अलग होगी। हो सकता है कि इसके कुछ आप के साथ काम कर सकते हैं? ...
मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन टेक्स्ट को गायब करने का एक सरल तरीका यह है कि आप अपनी पृष्ठभूमि के टेक्स्ट कलर को सेट कर लें।
जैसे अगर आपका टेक्स्ट इनपुट बैकग्राउंड सफेद है तो:
input[type="file"]{
color:#fff;
}यह फ़ाइल फ़ाइल पाठ को प्रभावित नहीं करेगा जो ब्राउज़र के कारण अभी भी काला होगा।
मेरा समाधान सिर्फ एक div के भीतर इसे सेट करने के लिए है जैसे "druveen" ने कहा, हालाँकि मैं अपनी खुद की बटन शैली को div से जोड़ता हूं (इसे एक बटन की तरह दिखता है: hover) और मैं बस शैली "opacity: 0;" सेट करता हूं। इनपुट के लिए। मेरे लिए एक आकर्षण काम करता है, आशा है कि यह आपके लिए भी ऐसा ही करे।
मैंने चौड़ाई के साथ एक इनपुट फ़ाइल को स्टाइल किया: 85px, और टेक्स्ट फ़ील्ड बिल्कुल गायब हो गया
यह HTML कोड केवल अपलोड फ़ाइल बटन को दिखाता है
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form><a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});मेरे लिए, सबसे सरल तरीका पृष्ठभूमि रंग जैसे फ़ॉन्ट रंग का उपयोग कर रहा है। सरल, सुरुचिपूर्ण नहीं, बल्कि उपयोगी।
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>तो यहाँ सभी भाइयों के लिए यह करने का सबसे अच्छा तरीका है :
सीएसएस को भूल जाओ!
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>ये सभी उत्तर प्यारे हैं, लेकिन CSS काम नहीं करेगा क्योंकि यह सभी ब्राउज़रों और उपकरणों में समान नहीं है, मैंने जो पहला उत्तर लिखा था वह सब कुछ लेकिन सफारी में काम करेगा। यह काम करने के लिए इसे प्राप्त करने के लिए सभी ब्राउज़रों को हर समय इसे गतिशील रूप से बनाया जाना चाहिए और हर बार जब आप इनपुट पाठ को साफ़ करना चाहते हैं, तो इसे दोबारा बनाया जाना चाहिए:
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);Tmanthey का उत्तर काफी अच्छा है, सिवाय इसके कि आप फ़ायरफ़ॉक्स v20 में सीमा-चौड़ाई के साथ नहीं खेल सकते। यदि आप लिंक देखते हैं (डेमो, वास्तव में यहाँ नहीं दिखा सकता है) तो उन्होंने फॉन्ट-साइज़ = 23px, ट्रांसफॉर्म का उपयोग करके समस्या को हल किया: बटन को बड़ा करने के लिए फ़ायरफ़ॉक्स के लिए ट्रांसलेशन (-300px, 0px) स्केल (4)।
एक अलग div पर .click () का उपयोग करने वाले अन्य समाधान बेकार हैं यदि आप इसे एक ड्रैग एन'एनलाइड्रॉप इनपुट बॉक्स बनाना चाहते हैं।
यहां कई वैध विकल्प हैं, लेकिन मैंने सोचा कि मैं एक समान मुद्दे को ठीक करने की कोशिश करते हुए क्या करूंगा। http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}मैंने यह लिखा:
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />सभी ब्राउज़रों में ठीक काम करें, कोई jQuery, कोई CSS नहीं।
यहाँ @ ampersandre के लोकप्रिय समाधान का एक सरलीकृत संस्करण है जो सभी प्रमुख ब्राउज़रों में काम करता है। Asp.NET मार्कअप
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />JQuery कोड
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});सीएसएस कोड
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}मानक के साथ सर्वर पोस्टबैक के लिए एक छिपा हुआ "अपलोडबटन" क्लिक ट्रिगर का उपयोग करता है। "अपलोड फ़ाइल" पाठ के साथ आवरण नियंत्रण में दृश्य से बाहर इनपुट नियंत्रण को धक्का देता है जब यह ज़रूरत से ज़्यादा हो जाता है तो "फ़ाइल इनपुट" नियंत्रण div के लिए किसी भी शैली को लागू करने की कोई आवश्यकता नहीं है। $ ([आईडी $ = "FileInput"]) चयनकर्ता मानक ASP.NET उपसर्गों के साथ आईडी के अनुभाग को लागू करने की अनुमति देता है। FilePath टेक्स्टबॉक्स का मान एक बार फ़ाइल अपलोड होने के बाद hdnFileName.Value से सर्वर कोड से सेट होता है।